vue UI框架中涉及到的 input校验相关

①、用js校验规则

:rules="[

              { required: true, message: '请填写身份证号' },

              {pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确身份证号', trigger: 'blur'}

            ]"

添加 pattern 部分 

邮箱、手机号 等 相关校验 https://www.cnblogs.com/xsd1/p/11976324.html 

②、根据 data中的 rules中 validator 对应的名 例如：validator: phoneNum,

rules: {

        mobile: [        

          { validator: phoneNum, required: true, trigger: 'blur'  }

        ],

      },

下面部分写在data中

let phoneNum = (rule, value, callback) => {

        const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/

        if (!value) {

          return callback(new Error('电话号码不能为空'))

        }

        setTimeout(() => {

          if (!Number.isInteger(+value)) {

            callback(new Error('请输入数字值'))

          } else {

            if (phoneReg.test(value)) {

              callback()

            } else {

              callback(new Error('电话号码格式不正确'))

            }

          }

        }, 100)

      };