验证表单规则

2021-11-15 18:03:00 阅读：116 来源： 互联网

标签：10 验证表单 trigger 规则 message password true 输入

(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

标签：10,验证,表单,trigger,规则,message,password,true,输入
来源： https://blog.csdn.net/wangyangzxc123/article/details/121339648

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

验证表单规则