验证表单规则

(1)、required:true               必输字段
(2)、remote:"remote-valid.jsp"   使用ajax方法调用remote-valid.jsp验证输入值
(3)、email:true                  必须输入正确格式的电子邮件
(4)、url:true                    必须输入正确格式的网址
(5)、date:true                   必须输入正确格式的日期,日期校验ie6出错,慎用
(6)、dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)、number:true                 必须输入合法的数字(负数,小数)
(8)、digits:true                 必须输入整数
(9)、creditcard:true             必须输入合法的信用卡号
(10)、equalTo:"#password"        输入值必须和#password相同
(11)、accept:                    输入拥有合法后缀名的字符串(上传文件的后缀)
(12)、maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
(13)、minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(14)、rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)、range:[5,10]               输入值必须介于 5 和 10 之间
(16)、max:5                      输入值不能大于5
(17)、min:10                     输入值不能小于10

 1.Vue中设置对应的验证信息

 <!-- 表单验证
      el-form绑定
      model:绑定数据
      rules:验证规则
      ref='form'用于获取实例对象
      el-from-item
      prop='需要验证的字段名'
       -->
      <el-form ref="form" :model="form" :rules="rules">

 2.把数据绑定到对应的表单输入框

        <el-form-item prop="mobile">
        <el-inputv-model="form.mobile"/>
        </el-form-item>

 3.书写校验的规则

  data() {
    return {
      form: {
        mobile: '13800000002',
        password: '123456'
      },
      rules: {
        //required.必填   message.提示信息   teigger 触发提示信息的方式
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号', trigger: 'burl' },
          { validate: (rule, value, callback) => {
            const reg = '/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/'
            if (reg.test(value)) {
              callback()
            } else {
              callback(new Error('请输入正确的手机号'))
            }
          } }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }, {
          min: 6, max: 12, message: '请输入6-12位密码', trigger: 'blur'
        }]
      }
    }
  },

VUE中没有键盘enter事件.但是可以通过下面方法实现


 @keyup.enter.native="submit"

 //  native

上一篇:学习笔记 2021.12.11


下一篇:MySQL主从复制针对trigger的特殊处理