Element-ui的表单中怎么添加正则校验

Posted 2020-12-30 lj8023

1. 以中国大陆手机号验证为例

// 这是组价的代码
<el-form-item prop="mobile">
    <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
</el-form-item>

// 这是rules的代码
mobile: [
    { validator: validateMobile, trigger: ‘blur‘ },
    { required: true, message: ‘请输入手机号‘, trigger: ‘blur‘ },
    { pattern: /^1[34578]d{9}$/, message: ‘目前只支持中国大陆的手机号码‘ }
],

2. 表单局部提交后端验证

//注意validatePass是属于data的，但不在return中。

data () {
let validatePass = (rule, value, callback) => {
    if (value.length >= 8) {
                let params = {
                    ‘account‘: value
                }
                axios.post(‘localhost:8080/verifyUserAccount‘, params)
                .then(function (response) {
                    if (response.data.err) {
                        callback(response.data.msg)
                    } else {
                        callback()
                    }
                })
                .catch(function () {
                    callback(new Error(‘服务异常‘))
                })
            } else {
                callback()
            }
}

//这是验证规则，当然了你也可以同时使用基本的验证规则
account: [
    { validator: validatePass , trigger: ‘blur‘ }
]