vue表单校验

时间: 2019-10-07阅读: 38标签: 表单

两个文件,一个写逻辑,一个写校验规则;
特点:逻辑简单,代码量少,够用;
不想看代码直接新建这两个文件复制代码,看最下面的使用方法;  

//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(key);
    this.validatorList.push({
        name: key,
        value: '',
        childrenNode:node.childrenNode,
        parentNode: node.parentNode,
        borderColor:getComputedStyle(node.childrenNode).borderColor,
        ruleReg:this.defineRule(key),//[{rule:'hanzi',valitatorRules:fn(this.value),error:'请输入汉字'}]
        errors :'',
    })
}
};
//动态修改校验规则
Validator.prototype.changeRules = function(rules,param){
let arrs = Object.keys(rules);
this.rules = {
    ...this.rules,
    ...rules
}
this.validatorList.forEach(val => {
    if(arrs.includes(val.name)){
        val.ruleReg = this.defineRule(val.name)
    }
})
if(param){
    return this.validate(param)
}
};
//校验执行者
Validator.prototype.validate = function(param){
let errorList =[];
return new Promise((resolve,reject) => {
    for (let key in param){
        this.validatorList.forEach(val => {
            if(val.name == key){
                val.value = param[key];
                this.runValidator(val);
            }
        })
        
    }

    this.validatorList.forEach(val => {
        Object.keys(param).forEach(v => {
            if(val.name == v && val.errors){
                errorList.push(val);
            }
        })
    })
    if(errorList.length > 0){
        reject(this)
    }else{
        resolve()
    }
})
}
//暴露出的展示错误
Validator.prototype.showError = function(name){
if(name){
    let module;
    this.validatorList.forEach(val => {
        if(val.name == name){
            module = val;
        }
    })
    if(module.errors){
        this.createError(module);
    } 
    
}else{
    this.validatorList.forEach(val => {
        if(val.errors){
            this.createError(val);
        }
        
    }) 
}

}
//执行校验工具;
Validator.prototype.runValidator = function(module){

let n = 0;
function run(param){
   if (n>=module.ruleReg.length){
       return
   }
   if(param.valitatorRules(module.value)){// 验证通过
        module.errors = '';
        n++;
        run(module.ruleReg[n]);
       
    } else{
        module.errors = param.error;
   }
}    
run(module.ruleReg[n]);

if(module.errors.length == 0 && module.newChildNode){
    this.clear(module);
}
}
//寻找节点
Validator.prototype.findNode= function(childenName){
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(name){
let rule = [],ruleString='';
for(let key in this.rules){
    if(name == key){
        ruleString = this.rules[key];
    }
}
let arr= ruleString.split('|');

arr.forEach(val => {
    if(valitatorRules[val]){
        console.log(this)
        rule.push({
            rule:val,
            valitatorRules:valitatorRules[val],
            error:this.error[name][val]
        })
    }
})

return rule;
}
//生产错误提示
Validator.prototype.createError = function(module){
if(module.newChildNode){
    module.newChildNode.innerText = module.errors;
    return
}
let newChildNode = document.createElement('div');
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(newChildNode);
}
}
//清除错误提示
Validator.prototype.clear = function(module){
if(module){
    module.childrenNode.style.borderColor = module.borderColor;
    module.parentNode.removeChild(module.newChildNode);
    module.newChildNode = null;
}else{
    this.validatorList.forEach(val => {
        if(val.newChildNode){
            val.childrenNode.style.borderColor = val.borderColor;
            val.parentNode.removeChild(val.newChildNode);
            val.newChildNode = null;
        }
    })
}
}
下面是校验规则,就更简单


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

//validator-rule.js
module.exports= {
hanzi:function(str){
    if(str){
        let reg = /[\u4e00-\u9fa5]/;
        return reg.test(str);
    }else{
        return true;
    }
    
},
required:function(str){
    return !(str.length == 0)
},
I:function(str){
    if(str){
        let reg = /i/;
        return reg.test(str);
    }else{
        return true;
    }
},
H:function(str){
    if(str){
        let reg = /h/;
        return reg.test(str);
    }else{
        return true;
    }
},
T:function(str){
    if(str){
        let reg = /t/;
        return reg.test(str);
    }else{
        return true;
    }
},
}
使用方法
**引入校验插件 import {Validator} from '@src/utils/valitator'**
    **校验规则可自行修改添加  @src/utils/valitator-rules**
    ****
    1.添加form  name属性<form name='example_form'></form>
    2.定义错误提示errors = {
        name:{
            required:'不能为空',
            hanzi:'得是汉字'
        },
        idCont:{
            I:'身份证号不对',
            H:'香港通行证不对',
            T:'台湾通行证不对',
        }
    };
    3.定义校验规则rules ={
        name:'required|hanzi',
        idCont: 'I'
    }
    4.初始化校验实例:this.Validator =new Validator('example_form',rules,errors);
    5.绑定校验信息:input增加name属性,保持和错误提示key一致  <input type="text" name='name' v-model='name'>
    6.执行校验:传入要校验的key和value; 
    this.Validator.validate({
        [name]:this[name],
    }).then(()=>{ 

    }).catch((errorCb)=>{
        console.log(errorCb)
        errorCb.showError();//展示错误提示,如果只展示某个提示,传入对应的值errorCb.showError('name')
    });
    7.动态跟换校验规则,如证件类型更换:
    this.Validator.changeRules(
        {idCont:this.idType},//传入新的校验规则
        {idCont:this.idCont})//传入校验的key和value进行校验
        .then(()=>{

        }).catch((errorCb)=>{
        errorCb.showError('idCont');
    });
    8:注意事项:每个input要用div包起来,保证错误信息位置正确添加;
    this.Validator.clear();清空所有错误提示
          

吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

链接: http://www.fly63.com/article/detial/6303

form表单input回车提交问题

文本框输入完成后点击回车页面刷新,问题出在form上,当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容,就会发生刷新事件。

layui在form表单不回调的问题

在使用layui进行ajax表单提交时,不回调,并且刷新了当前页面。在表单提交后添加 代码 return false;form.on()表单监控事件中一定要加 return false;

js如何获取checkbox被选中的值?

通过复选框的name属性,遍历后将被选中的复选框的值输出:checkbox[index].nextSibling.nodeValue: 获取的是checkbox中标签包裹的文本值,建立一个数组,使用push 方法将被选中的元素保存到数组

JS使用textarea模拟post提交表单

textarea代表HTML表单多行输入域,textarea标签是成对出现的,以<textarea>开始,以</textarea>结束。cols -- 多行输入域的列数,rows -- 多行输入域的行数

HTML5表单新特性

HTML5表单新特性之——新的input typeEmail:邮件输入域,在表单提交时提供简单的邮箱格式验证,并弹出一个提示矿口(可定制内容不能定制样式),url:URL地址输入域。在表单提交时提供简单的URL地址格式验证

AntDesign表单的理解与使用

虽然 react 没有内置的表单验证逻辑,但是我们可以使用 react 组件库 AntDesign 中的表单组件 Form 来实现这一需求。具体地, AntDesign 中的表单组件 Form 与表单域 Form.Item(用于包裹任意输入控制的容器)配合使用:

form 表单中 disabled 属性的元素不参与表单提交

当上述两种写法出现时,表单提交的数据中,将不包括 age 这个属性,这是因为 input 被设置为了 disabled。若想将 age 属性随 form 表单提交,个人推荐解决办法是不设置 disabled,改为 readonly,具体参照 W3C 的规范。

Js使用表单元素验证表单

最简单的HTML结构:网站最基础的就是注册,它是一个系统的交互基础;因为用户最后要去点击\\\"注册\\\"按钮,所以我们就在\\\"注册\\\"按钮上添加一个onclick事件属性,引用eg.regCheck()

PHP如何解决表单重复提交

表单隐藏域中存放session(表单被请求时生成的标记)。采用此方法在接收表单数据后,检查此标志值是否存在,先进行删除,然后处理数据; 若不存在,说明已提交过,忽略本次提交。加载提交的页面时候

css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交。就会触发浏览器自动填充表单。比如chrome自动填充后,淡黄色输入框代替了背景样式,看起来有些怪异。input文本框是使用图片背景的

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全