美文网首页Vue移动端
vue UI框架中涉及到的 input校验相关

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

作者: 郭先森啊 | 来源:发表于2020-07-10 11:14 被阅读0次

    ①、用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)

          };

    相关文章

      网友评论

        本文标题:vue UI框架中涉及到的 input校验相关

        本文链接:https://www.haomeiwen.com/subject/yjipcktx.html