elementui简单的form校验这里就不介绍了，这里主要记录下如何通过后台进行指定字段的异步后台校验。
1.导入axios
<script src="https://unpkg.com/axios/dist/axios.min.js">
//为了保证引用速度，可以把axios的js文件copy到项目文件中
2.注意校验方法的位置
var vue = new Vue({
el: '.background',
data () {
var validatePhone = (rule, value, callback) => {
var reg = /^1[0-9]{10}$/;
if(!reg.test(value)){
callback(new Error("请输入正确格式手机号"));
return;
}
var params = new URLSearchParams();//后台采用json传参，
//如果传参出现问题可以参考这篇博客https://blog.csdn.net/wild46cat/article/details/78447467
params.append('phone',value);
params.append('id',vue.ruleForm.id);//主键id保证在修改数据时对当前不进行校验，sql中排除当前id数据
axios.post([[@{/employee/checkPhoneAndEmail}]], params, { emulateJSON: true })
.then(function (response) {
if (response.data.code !=000) {
callback(new Error(response.data.msg));
} else {
callback()
}
}).catch(function () {
callback(new Error('服务异常'))
})
};
let validateEmail = (rule, value, callback) => {
var reg = /^1\d{5}$/;
if(!reg.test(value)){
callback(new Error("请输入以1开头，长度为6位的数字"));
return;
}
var params = new URLSearchParams();
params.append('email',value);
axios.post([[@{/employee/checkPhoneAndEmail}]], params, { emulateJSON: true })
.then(function (response) {
if (response.data.code !=000) {
callback(new Error(response.data.msg));
} else {
callback()
}
}).catch(function () {
callback(new Error('服务异常'))
})
};
return {
employeeData:employeeData,
emailSuffix:emailSuffix,
ruleForm: {
phone: employeeData[0].phone,
email: formatEmail,
id:'',//数据主键
},
rules: {
phone: [
{required: true, trigger: 'blur'},
],
email: [//自定义校验规则validator:validateEmail
{required: true, validator:validateEmail, trigger: 'blur'}, ], } } },
methods: {
back(){ window.open([[@{/employee/showHtml}]],"_self"); },
input(){ this.emailDisabled=false; },
submit(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
var json = {
'phone': this.ruleForm.phone,
'email': this.ruleForm.email,
'userId': this.employeeData[0].user_id,
//……提交方法略
};
} ,