js_脚本之家

作者: 澳门金莎娱乐网站  发布:2019-11-28

澳门金莎娱乐网站 ,两个文件,一个写逻辑,一个写校验规则;

jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。

特点:逻辑简单,代码量少,够用;

第一节:jQuery Validation让验证变得如此容易

不想看代码直接新建这两个文件复制代码,看最下面的使用方法;

一、官网下载jquery,和jquery validation plugin 二、引入文件

//validator.js//引入校验规则var valitatorRules = require('./valitator-rules.js');export const Validator=function(formName,rules,errors){// rules:{// name:'required|regexp_hanzi',// idCont: 'regexp_I'// }this.rules = rules;// let errors = {// name:{// required:'不能为空',// regexp_hanzi:'得是汉字'// },// idCont:{// regexp_I:'身份证号不对',// regexp_H:'香港通行证不对',// regexp_T:'台湾通行证不对',// }// };this.error = errors;this.form = document.forms[formName];this.validatorList = [];this.init();}//初始化Validator.prototype.init = function(){for (let key in this.rules){ let node = this.findNode; this.validatorList.push({ name: key, value: '', childrenNode:node.childrenNode, parentNode: node.parentNode, borderColor:getComputedStyle.borderColor, ruleReg:this.defineRule,//[{rule:'hanzi',valitatorRules:fn,error:'请输入汉字'}] errors :'', })}};//动态修改校验规则Validator.prototype.changeRules = function{let arrs = Object.keys;this.rules = { ...this.rules, ...rules}this.validatorList.forEach(val => { if(arrs.includes{ val.ruleReg = this.defineRuleif{ return this.validate}};//校验执行者Validator.prototype.validate = function{let errorList =[];return new Promise => { for { this.validatorList.forEach(val => { if{ val.value = param[key]; this.runValidator } this.validatorList.forEach(val => { Object.keys.forEach(v => { if(val.name == v && val.errors){ errorList.push if{ reject }else{ resolve}//暴露出的展示错误Validator.prototype.showError = function{ let module; this.validatorList.forEach(val => { if{ module = val; } }) if{ this.createError; } }else{ this.validatorList.forEach(val => { if{ this.createError }}//执行校验工具;Validator.prototype.runValidator = function{let n = 0;function run{ if (n>=module.ruleReg.length){ return } if(param.valitatorRules{// 验证通过 module.errors = ''; n  ; run; } else{ module.errors = param.error; }} run;if(module.errors.length == 0 && module.newChildNode){ this.clear;}}//寻找节点Validator.prototype.findNode= function{let form = this.form;let childrenNode = form.querySelector(`input[name="${childenName}"]`) || form.querySelector(`textarea[name="${childenName}"]`);let parentNode = childrenNode.parentNode;return { childrenNode, parentNode}};//寻找验证规则Validator.prototype.defineRule =function{let rule = [],ruleString='';for(let key in this.rules){ if{ ruleString = this.rules[key]; }}let arr= ruleString.split;arr.forEach(val => { if{ console.log rule.push({ rule:val, valitatorRules:valitatorRules[val], error:this.error[name][val] }) }})return rule;}//生产错误提示Validator.prototype.createError = function{if{ module.newChildNode.innerText = module.errors; return}let newChildNode = document.createElement;newChildNode.className='_errorMessage';newChildNode.style.color = 'red';newChildNode.style.fontSize = '12px';newChildNode.innerText = module.errors;module.newChildNode = newChildNode;module.childrenNode.style.borderColor = 'red';if(module.childrenNode.nextSibling){ module.parentNode.insertBefore(newChildNode,module.childrenNode.nextSibling);}else{ module.parentNode.appendChild;}}//清除错误提示Validator.prototype.clear = function{ module.childrenNode.style.borderColor = module.borderColor; module.parentNode.removeChild; module.newChildNode = null;}else{ this.validatorList.forEach(val => { if{ val.childrenNode.style.borderColor = val.borderColor; val.parentNode.removeChild; val.newChildNode = null; } })}}

三、接下来,声明下面的HTML片段

下面是校验规则,就更简单

通过以上代码,大家会发现我们对于每一个input都加上了 他的作用就是在这个inpute标签为空时会提示用户出错。四、最后我们要为我们的框架找到一个切入点

说明一下,非空校验没有做单独处理,所以校验规则这里就多写个if else;

 $ { $; })  
//validator-rule.jsmodule.exports= {hanzi:function{ let reg = /[u4e00-u9fa5]/; return reg.test; }else{ return true; } },required:function{ return !},I:function{ let reg = /i/; return reg.test; }else{ return true; }},H:function{ let reg = /h/; return reg.test; }else{ return true; }},T:function{ let reg = /t/; return reg.test; }else{ return true; }},}

**引入校验插件 import {Validator} from '@src/utils/valitator'** **校验规则可自行修改添加 @src/utils/valitator-rules** **** 1.添加form name属性 2.定义错误提示errors = { name:{ required:'不能为空', hanzi:'得是汉字' }, idCont:{ I:'身份证号不对', H:'香港通行证不对', T:'台湾通行证不对', } };

rules ={ name:'required|hanzi', idCont: 'I' }

当然提示信息默认是英文的,可根据需要在jquery.validate.js里修改。

4.初始化校验实例:this.Validator =new Validator('example_form',rules,errors);

第二节:jQuery Validation让验证变得如此容易

5.绑定校验信息:input增加name属性,保持和错误提示key一致

上一个例子我们是统一引用jquery.validate.js这样所有必填字段的提示信息都将是This field is required.现在要改成动态提示,比如姓名如果为空则提示姓名不能为空,密码如果为空则提示密码不能为空。这次我们将校验规则写在代码里首先还是先引入文件

6.执行校验:传入要校验的key和value;

接下来,声明下面的HTML片段

 this.Validator.validate({ [name]:this[name], }).then.catch=>{ console.log errorCb.showError();//展示错误提示,如果只展示某个提示,传入对应的值errorCb.showError;

和之前的相比没有了最后 校验规则如下:

7.动态跟换校验规则,如证件类型更换:

$ { $.validate({ rules: { username: { required: true }, password: { required: true } }, messages: { username: { required: "姓名不能为空!" }, password: { required: "密码不能为空!" } } }); }) 

本文由金沙澳门官网发布于澳门金莎娱乐网站,转载请注明出处:js_脚本之家

关键词: 金沙澳门官网

上一篇:实战集锦_javascript本事_脚本之家
下一篇:没有了