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

最新推荐文章于 2025-04-27 08:35:08 发布

转载最新推荐文章于 2025-04-27 08:35:08 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lj8023/p/9488817.html

文章标签：

#javascript #ui #后端 #ViewUI

本文详细介绍了如何在前端使用Element UI组件库进行手机号验证，并通过Axios与后端进行数据交互实现账号验证。展示了具体的代码实现，包括验证规则设置及异步请求处理。

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

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' }
]