验证表单规则

最新推荐文章于 2024-05-08 10:46:54 发布

原创最新推荐文章于 2024-05-08 10:46:54 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #服务器 #前端

本文详细介绍了Element-UI中表单验证的使用方法，包括各种验证规则如必填、邮箱格式、日期、数字等，并给出了Vue.js中设置验证规则的示例。通过`el-form`和`el-form-item`组件结合`v-model`和`rules`属性实现数据绑定和验证。此外，还展示了如何处理键盘事件以响应回车提交。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(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-input v-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) => {
            // 正则校验规则
            // 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'
        }]
      }
    }
  },

this.$refs.form.validate((value) => {
        if (value) {
    // 校验表单规则后.判断是否为true 
    // 满足条件后执行后续代码 
    // 例如发起axios请求等..
   }
}

在element-ui 里没有键盘事件.通过下面方法可以做到enter事件

 @keyup.enter.native="submit"

 //  native