element UI中自定义表单的校验规则
element UI的form表单提供了强大的表单校验功能
https://element.eleme.cn/#/zh-CN/component/form
validate是对整个表单进行校验的方法
validateField第一个参数是数组或字符串,第二个参数是回调函数,回调函数有值则表示错误
使用示例
<section>
<el-form ref="ruleForm"
:model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
<el-form-item label="昵称" prop="name">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="ruleForm.email" />
<el-button size="mini" round @click="sendMsg">
发送验证码
</el-button>
<span class="status">{{ statusMsg }}</span>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model="ruleForm.code" maxlength="4" />
</el-form-item>
<el-form-item label="密码" prop="pwd">
<el-input v-model="ruleForm.pwd" type="password" />
</el-form-item>
<el-form-item label="确认密码" prop="cpwd">
<el-input v-model="ruleForm.cpwd" type="password" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register">
同意以下协议并注册
</el-button>
<div class="error">{{ error }}</div>
</el-form-item>
<el-form-item>
<a class="f1" href="http://www.meituan.com/about/terms" target="_blank">
《用户协议》
</a>
</el-form-item>
</el-form>
</section>
//引入加密库crypto-js,其中包括常用于密码加密的md5
import CryptoJS from 'crypto-js'
data() {
return {
// 错误提醒内容
statusMsg: '',
error: '',
ruleForm: {
name: '',
code: '',
pwd: '',
cpwd: '',
email: ''
},
rules: {
name: [{
required: true,
type: 'string',
message: '请输入昵称',
trigger: 'blur'
}],
email: [{
required: true,
type: 'email',
message: '请输入邮箱',
trigger: 'blur'
}],
pwd: [{
required: true,
message: '创建密码',
trigger: 'blur'
}],
cpwd: [{
required: true,
message: '确认密码',
trigger: 'blur'
}, {
validator: (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.ruleForm.pwd) {
callback(new Error('两次输入密码不一致'))
} else {
callback()
}
},
trigger: 'blur'
}]
}
}
},
methods: {
//发送验证码
sendMsg: function () {
const self = this;
let namePass
let emailPass
// 如果60秒的发送验证码CD还存在,停止后续操作
if (self.timerid) {
return false
}
//校验用户名 (element UI的from表单中自定义校验规则)
//validateField第一个参数是数组或字符串,第二个参数是回调函数,
// 回调函数有值则表示错误
this.$refs['ruleForm'].validateField('name', (valid) => {
namePass = valid
})
// 清空错误提醒内容
self.statusMsg = ''
// 如果用户名校验没有通过,即namePass存在
if (namePass) {
return false
}
//校验邮箱 (element UI的from表单中自定义校验规则)
this.$refs['ruleForm'].validateField('email', (valid) => {
emailPass = valid
})
//如果用户名通过(namePass的值不存在),且邮箱通过(emailPass的值不存在)
if (!namePass && !emailPass) {
self.$axios.post('/users/verify', {
// 中文需要编码
username: encodeURIComponent(self.ruleForm.name),
email: self.ruleForm.email
}).then((
{ status, data }
) => {
// 后端定义,返回的code为0表示成功,-1表示异常错误
if (status === 200 && data && data.code === 0) {
let count = 60;
self.statusMsg = `验证码已发送,剩余${count--}秒`
self.timerid = setInterval(function () {
self.statusMsg = `验证码已发送,剩余${count--}秒`
if (count === 0) {
clearInterval(self.timerid)
}
}, 1000)
} else {
//错误提醒内容
self.statusMsg = data.msg
}
})
}
},
//注册
register: function () {
let self = this;
//validate对整个表单进行校验的方法
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
self.$axios.post('/users/signup', {
//中文进行编码
username: window.encodeURIComponent(self.ruleForm.name),
// 使用crypto-js中的MD5对密码进行加密,注意要转为字符串
password: CryptoJS.MD5(self.ruleForm.pwd).toString(),
email: self.ruleForm.email,
code: self.ruleForm.code
}).then(({
status,
data
}) => {
if (status === 200) {
if (data && data.code === 0) {
location.href = '/login'
} else {
self.error = data.msg
}
} else {
self.error = `服务器出错,错误码:${status}`
}
setTimeout(function () {
self.error = ''
}, 1500)
})
}
})
}
}