vue随笔7-关于vue 表单验证rules以及validator验证器的使用

---

前言

最近做项目用到vue的validator验证，思量了一下发现这个验证用到的地方还挺多的，特别是登陆注册表单验证和一些复杂的业务表单提交，现在趁着工作有空就记录一下自己的思路

---

一、表单验证el-form、rule

表单验证的功能要配合绑定rules的验证规则才有效的

表单的代码如下（示例）：

 <el-form 
       class="form"
        @submit.native.prevent 
        ref="form"
        size="mini" 
        :rules="formRules"
        :model="formData">
        <el-form-item prop="name" label="账号名">
          <el-input  v-model.trim="formData.name"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input  v-model.trim="formData.password" ></el-input>
        </el-form-item>
        <el-form-item prop="confirm" label="密保指令">
          <el-input type="textarea" v-model="formData.confirm" ></el-input>
        </el-form-item>
</el-form>

二、rules中使用validator

这里的话可以有两种写法

写法一，一般写法这样的：

data() {
	//rule表示要验证的规则,value表示输入值,callback回调
    var validatorFn = (rule, value, callback) => {
      let Reg =/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;//正则表达式验证例子
      if (!value) {	
        callback();//如果输入为空直接返回
      } else {
        if (Reg.test(value)) {	//匹配成功返回
          callback();	
        } else {	//匹配不成功返回错误显示
          callback(new Error("错误提示"));
        }
      }
    };//以上validatorFn为写法的参考



    var validatorName = (rule,value,callback) =>{
            let NameReg = /[0-9a-zA-Z]{1,20}$/                       
            if (value && value.length!== 0 && !NameReg.test(value)) {                             
              callback('登录账号支持字母、数字组合')                       
            } else {
              callback(new Error("错误提示"))                      
            }
         };
    
    var validatorPassword = (rule, value, callback) => {            
          if (value.length >= 8 && value.length <= 16) {
          if (/[0-9]/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value) && /^[A-Za-z0-9]+$/.test(value)) {
             callback()
             }
            callback(new Error('密码必须是大写字母+小写字母+数字组合'))
           } else {
             callback(new Error('密码必须是8-16位'))
           }
        }
    var validatorConfirm = (rule,value,callback)=>{
              if(value){
                let confirmArr=value.split('\n').map(item=>item.trim()).filter(item=>item!='')
                for(let item of confirmArr){
                  let reg=/[0-9a-zA-Z]{1,20}$/
                  if(!reg.test(item)){
                    callback('请输入正确的令牌指令')
                    return;
                  }
                }
                callback()
              }
              callback()
          };

    return {
      formData: {},
      formRules: {
        name: [
          { validator: validatorName, trigger: "blur" },
        ],
        password: [
          { validator: validatorPassword,trigger: "blur" },
        ],
       confirm: [
          { required: true, message: '请输入令牌指令', trigger: 'blur' },
          { validator: validatorConfirm,trigger: "blur" },
        ],
      },
    };
  },
  methods:{
    submit() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          this.$message({
            message: '请修改正确的格式',
            type: 'waring'
        })
          return;
        } else {
          //调用数据交互的接口
        }
      });
    },
  }

写法二-这是改变了data中rules的写法，本质上没有什么不同，看个人编码风格：

data() {
    return {
      formData: {},
      formRules: {
        name: [
          { validator: (rule,value,callback) =>{
              let NameReg = /[0-9a-zA-Z]{1,20}$/                       
              if (value && value.length!== 0 && !NameReg.test(value)) {                             
                callback('登录账号支持字母、数字组合')                       
               } else {
                 callback(new Error("错误提示"))                      
               }
            }, 
            trigger: "blur" },
        ],
        password: [
          { validator: (rule, value, callback) => {            
              if (value.length >= 8 && value.length <= 16) {
             if (/[0-9]/.test(value) && /[a-z]/.test(value) && /[A-Z]/.test(value) && /^[A-Za-z0-     9]+$/.test(value)) {
             callback()
             }
            callback(new Error('密码必须是大写字母+小写字母+数字组合'))
           } else {
             callback(new Error('密码必须是8-16位'))
           }
        },
        trigger: "blur" },
        ],
       confirm: [
          { required: true, message: '请输入令牌指令', trigger: 'blur' },
          { validator:(rule,value,callback)=>{
              if(value){
                let confirmArr=value.split('\n').map(item=>item.trim()).filter(item=>item!='')
                for(let item of confirmArr){
                  let reg=/[0-9a-zA-Z]{1,20}$/
                  if(!reg.test(item)){
                    callback('请输入正确的令牌指令')
                    return;
                  }
                }
                callback()
              }
              callback()
          },trigger: "blur" },
        ],
      },
    };
  },