element-ui中表单验证的常用方式

最新推荐文章于 2024-08-02 10:16:42 发布

庸人628

最新推荐文章于 2024-08-02 10:16:42 发布

阅读量251

点赞数

文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/weixin_60715332/article/details/132685388

版权

文章介绍了在Vue项目中使用ElementUI进行表单验证的两种方式：一是全局定义校验规则对象，适用于所有对应prop字段；二是针对单个表单项添加自定义验证规则，适用于特定字段或动态变化的验证需求。

摘要由CSDN通过智能技术生成

第一种方式：表单上加rules｛object｝

<el-form :model="formData" :rules="rule" ref="form">
    <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入姓名" clearable></el-input>
    </el-form-item>
    <el-form-item label="身份证号" prop="IDnum">
       <el-input v-model="formData.IDnum" :maxlength="18" placeholder="请输入身份证号" clearable></el-input>
    </el-form-item>
</el-form>

这种方式需要在data()中定义rule{},需要在属性prop中写上对应的校验字段，如name写上验证规则，如下：

data() {
   return {
       formData: {
           name: '',
           IDnum: ''
       },
       rule: {
           name: [
               { required: true, message: '请输入姓名', trigger: 'blur' },
               { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
               { pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/, message: '姓名不支持特殊字符', trigger: 'blur'}
          ],
          IDnum: [
              { required: true, message: '请输入身份证号', trigger: 'blur' },
              { min: 15, max: 18, message: '请如实填写18位号码，以供学校保卫科核对', trigger: 'blur' },
              { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur' }
          ]
      }
   }
}

第二种方式：在el-form-item单个添加

(1) 其中对于有些需要自定义的校验规则可以作为变量写在data中：

<el-form-item label="电话号码" :prop="phoneNum" :rules="rule">
    <el-input v-model="formData.phoneNum" :maxlength="11" placeholder clearable></el-input>
</el-form-item>

data() {
    return {
        formData: {
            phoneNum: ""
        },
        rule: [
            { required: true, message: '请输入电话号码', trigger: 'blur' }, 
            { required: true, pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/, message: '请输入正确的电话号码', trigger: 'blur' }]
    }
}

(2) 这种方式适用于需要个别检验的字段，或者表单字段有变动的校验；

<el-form-item label="电话号码" :prop="phoneNum" :rules="[{ required: true, message: '请输入电话号码', trigger: 'blur' }, { required: true, pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/, message: '请输入正确的电话号码', trigger: 'blur' }]">
    <el-input v-model="formData.phoneNum" :maxlength="11" placeholder clearable></el-input>
</el-form-item>