小編在進行b2b項目時候用的框架是Vue+Element，在b2b中各種表單各種驗證张遭，原來js都是通過正則彈框的形式去提示用戶，在Element中封裝了很好用的表單驗證提示，小編將它進一步封裝：?
首先在staic文件夾下簡歷了formValidator.js文件螃宙，內容如下：?
// 手機號驗證
var phone = (rule, value, callback) => {
let regFormat = /^[1][3578][0-9]{9}$/; //正確手機號
if (!value) {
return callback(new Error('不能為空'));
}
if (!(regFormat.test(value))) {
callback(new Error('請輸入正確手機號'));
} else {
if (value < 18) {
callback(new Error('必須大于18歲'));
}else {
callback();
}
}
};
//數字驗證
var number = (rule, value, callback) => {
if (!value) {
return callback(new Error('不能為空'));
}
if (!Number.isInteger(value)) {
callback(new Error('請輸入數字值'));
} else {
if (value < 18) {
callback(new Error('必須大于18歲'));
}else if(value >55){
callback(new Error('必須小于55歲'));
} else {
callback();
}
}
};
//text不能為空
var text = (rule, value, callback) => {
if (!value) {
return callback(new Error('不能為空'));
}else{
callback();
}
};
//desc不能為空
var desc = (rule, value, callback) => {
if (!value) {
return callback(new Error('不能為空'));
}else{
callback();
}
};
//郵箱
var email = (rule, value, callback) => {
let mal = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!value) {
return callback(new Error('不能為空'));
}
if(!(mal.test(value))) {
callback(new Error('請輸入正確郵箱'));
}else{
callback();
}
};
//開始時間
var startTime = (rule, value, callback) => {
if (!value) {
return callback(new Error('請選擇開始日期'));
}else{
callback();
}
};
//開始時間
var endTime = (rule, value, callback) => {
if (!value) {
return callback(new Error('請選擇結束日期'));
}else{
callback();
}
};
//時間
var time = (rule, value, callback) => {
if (!value) {
return callback(new Error('請選擇日期'));
}else{
callback();
}
};
//多選框
var checkbox = (rule, value, callback) => {
if (value.length<1) {
return callback(new Error('請選擇一個'));
}else{
callback();
}
};
//單選框
var radio = (rule, value, callback) => {
if (value.length<1) {
return callback(new Error('請選擇一個'));
}else{
callback();
}
};
//下拉框
var select = (rule, value, callback) => {
if (value.length<1) {
return callback(new Error('請選擇一個'));
}else{
callback();
}
};
image.png
image.png
image.png
在調用的時候?例如：郵箱驗證
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item prop="email" label="郵箱" >
<el-input v-model="ruleForm.email"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
email: [{
validator: email//email的方法
}]
data() {
return {
ruleForm: {
email: ''
},
rules: {
email: [{
validator: email
}]
}
}
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
手機號驗證
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="手機號" prop="phone" >
<el-input v-model.number="ruleForm.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
phone: [{
validator: phone
}]
data() {
return {
ruleForm: {
phone: ''
},
rules: {
phone: [{
validator: phone
}]
}
}
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
