elemeng-ui 中el-form 表单如何校验

在开始之前需要把element-ui在vue中引入好，如果没有引入好的话，需要先跟着element-ui的文档进行操作，接下来就可以进行学习了。

第一种：在el-form-item单个添加验证

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

做法：需要在el-form-item标签中加入 :rules=''直接是验证的条件 ''

下面举个例子（验证用户名 不能为空）

 

<el-form-item label="用户名"  :prop="userName" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
    <el-input v-model="userName" :maxlength="16" placeholder clearable></el-input>
</el-form-item>

案例样图

第二种：在表单上加多个验证

这种方式适用于表单全部字段校验或需要校验字段类型比较简单的数据类型

做法：需要在el-form-item标签中加入 :rules=''rules '' ，然后在data()中写入rule{添加每个表单的验证}

下面举个例子（验证用户名和密码 不能为空）

 

<el-form   :model="formData" :rules="dateRule" ref="form">
    <el-form-item label="用户名" prop="userName">
        <el-input v-model="formData.userName"  type="password" placeholder="请输入用户名" clearable></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="userPass">
       <el-input v-model="formData.userPass" :maxlength="18" placeholder="请输入密码" clearable></el-input>
    </el-form-item>
</el-form>

data中

 

 rule: {
           userName:  loginName: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        userPass: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ]
      }

案例样图

我这两个都只简单了做了不为空的验证，还可以加其他的验证噢(如下)

最基础的验证

 

 { required: true, message: '请输入姓名', trigger: 'blur' },//不能为空
 { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },//长度
 { required: true,
    pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
    message: '姓名不支持特殊字符',
    trigger: 'blur' }//正则

在data中定义一些自定义的验证

 

data() {
    let reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/
    var newPass= (rule, value, callback) => { 
        if (!reg.test(value)) {
            callback(new Error('密码应是6-12位数字、字母或字符！'))
        } else if (this.form.oldPasswd === value) {
            callback(new Error('新密码与旧密码不可一致！'))
        } else {
            callback()
        }
    }

    }
    return {
        form: {
            newPasswd: ''
        },
        rules: {
            newPasswd: [
                { required: true, message: '请输入新密码', trigger: 'blur' },
                { validator: newPass, trigger: 'blur' }
            ]
        }
    }
}

/**

• 参数 item
• required true 必填项
• maxLength 字符串的最大长度
• min 和 max 必须同时给 min < max type=number
• type 手机号 mobile
• 邮箱 email
• 网址 url
• 各种自定义类型 定义在 src/utils/validate 中 持续添加中.......
• */

作者：_Miss_Chen
链接：https://www.jianshu.com/p/d9c88d6ab439
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。