element-ui表单验证（验证手机号是否正确 自定义验证规则）

效果图

1. html

<el-form :model="userForm"status-icon:rules="rules"class="login-form"ref="userForm"><el-form-item class="login-head"></el-form-item><el-form-item prop="mobile"><el-input v-model="userForm.mobile"placeholder="请输入手机号"></el-input></el-form-item><el-form-item prop="code"><el-input v-model="userForm.code"placeholder="请输入验证码"></el-input></el-form-item><el-form-item prop="agree"><el-checkbox v-model="userForm.agree">我已阅读并同意用户协议</el-checkbox></el-form-item><el-form-item><el-button type="primary"class="login-btn":loading="loginLoading"@click="onLogin">登录</el-button></el-form-item></el-form>

2. script

export default {name: 'login',data () {// 自定义表单验证是否勾选协议协议var validateAgree = (rule, value, callback) => {if (value) {callback()} else {callback(new Error('请勾选同意协议'))}}// rule：验证的详细信息// value：验证是否通过，false失败，true通过// callback：回调函数 return {userForm: {mobile: '13911111111',code: '246810',agree: false // 协议},checked: false, // 复选框loginLoading: false, // 按钮加载状态rules: {mobile: [// 添加正则表达式 pattern: /^1[3|5|7|8|9]\d{9}$/，验证手机号是否正确{required: true, message: '请输入手机号', trigger: 'change' },{pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }],code: [{required: true, message: '请输入验证码', trigger: 'change' }],// 自定义验证是否勾选协议agree: [{validator: validateAgree, trigger: 'change' }]}}},methods: {onLogin () {// validate是异步请求this.$refs.userForm.validate(valid => {// 如果验证失败，不发送请求if (!valid) {return false}this.login()})},login () {this.loginLoading = truelogin(this.userForm).then(res => {// console.log(res)this.$message.success('登录成功！')this.loginLoading = false}).catch(err => {this.$message.error('登录失败！', err)this.loginLoading = false})}}}