element-ui做表单验证 v-for遍历表单 自动生成校验规则 pc移动双适配
整体思路：
1：利用element-ui的栅格实现小分辨率和大分辨率的适配
2：模拟一组数据，从中筛选出 绑定各个表单值的对象 以及生成验证规则对象
3：在script标签内 、data（）外，自定义验证规则，这样在created钩子中（也就是生成验证对象时）就可以将这些自定义的规则加入进去
下面是整了一天的代码：
<template>
<div class="box1">
<div style="margin-top:400px;"></div>
<el-row>
<el-col :xs="0" :md="3"> </el-col>
<el-col :xs="24" :md="18">
<el-form label-width="100px" ref="formData" :model="formData" :rules="rules">
<div :index="(index+'')" v-for="(item,index) in arrList" :key="item.name">
<el-form-item v-if="item.name=='select'" :prop="item.name" :label="item.name">
<el-select v-model.trim="formData[item.name]"
placeholder="请选择活动区域"
@change="valChange"
style="width:100%;">
<el-option label="请选择" value=""></el-option>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item v-else-if="item.name=='textarea'" :prop="item.name" :label="item.name">
<el-input type="textarea" v-model.trim="formData[item.name]" @change="valChange"></el-input>
</el-form-item>
<el-form-item v-else :prop="item.name" :label="item.name">
<el-input v-model.trim="formData[item.name]" @blur="valChange"></el-input>
</el-form-item>
</div>
<el-form-item style="text-align:center;">
<el-button type="primary" @click="submitForm('formData')">立即创建</el-button>
<el-button @click="resetForm('formData')">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
</template>
<script>
// import global from '@/js/global.js';
//自定义校验规则(邮箱)
var checkEmail = (rule, value, callback) => {
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if (!value) {
return callback(new Error('邮箱不能为空'));
}
setTimeout(() => {
if (mailReg.test(value)) {
callback()
} else {
callback(new Error('请输入正确的邮箱格式'));
}
}, 100)
}
// 电话验证
var checkPhone = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
if (!value) {
return callback(new Error('电话号码不能为空哦也'))
}
setTimeout(() => {
// Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
// 所以我就在前面加了一个+实现隐式转换
if (!Number.isInteger(+value)) {
callback(new Error('请输入数字值'))
} else {
if (phoneReg.test(value)) {
callback()
} else {
callback(new Error('电话号码格式不正确'))
}
}
}, 100)
}
export default {
components:{
},
data(){
return {
formData:{},//用于绑定各个表单值的对象
arrList:[],//模拟一个初始化数据
rules:{},//验证规则对象
}
},
created(){
//模拟的假数据
this.arrList=[
{name:"a1",required:1},
{name:"a2",required:0},
{name:"select",required:1},
{name:"email",required:1},
{name:"phone",required:1},
{name:"textarea",required:1},
]
// 用于绑定各个表单值的对象
for(let i=0,len=this.arrList.length;i<len;i++){
var obj={[this.arrList[i].name]:""}
this.formData=Object.assign({},this.formData,obj);
}
console.log(this.formData);
// 生成校验规则对象
for(let i=0,len=this.arrList.length;i<len;i++){
var arrs=[];
if(this.arrList[i].required==1){
var objs={
required: true,
message: this.arrList[i].name+'不能为空',
trigger: 'blur'
};
if(this.arrList[i].name=='select'){
objs={
required: true,
message: this.arrList[i].name+'不能为空',
trigger: 'change'
}
arrs.push(objs);
}else if(this.arrList[i].name=='email'){
arrs.push(objs);
objs={ validator: checkEmail, trigger: 'blur' };//自定义的验证规则
arrs.push(objs);
}else if(this.arrList[i].name=='phone'){
arrs.push(objs);
objs={ validator: checkPhone, trigger: 'blur' };//自定义的验证规则
arrs.push(objs);
}else if(this.arrList[i].name=='textarea'){
arrs.push(objs);
objs={ min: 5, max: 8, message: '长度在 5 到 8 个字符', trigger: 'blur' };//长度验证
arrs.push(objs);
}else{
arrs.push(objs);
}
}
this.rules[this.arrList[i].name]=arrs;
}
console.log(this.rules)
},
mounted(){
},
methods:{
//提交事件
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
// 重置事件
resetForm(formName) {
this.$refs[formName].resetFields();
},
// 每个表单的值改变的事件
valChange(val){
console.log(val)
console.log(this.formData)
}
}
}
</script>
增加一个表单验证的正则：
function verifyEmail(email){ var reg = new RegExp(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/); //邮箱验证 if(reg.test(email)){ return true; }else{ return false; } }
完整邮箱验证：
var validUsername=(rule, value, callback)=>{ var reg = new RegExp(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/); //邮箱验证 if(value){ if(reg.test(value)){ this.checkEmail(value).then((data=>{ if(data){ callback(); }else{ callback(new Error('邮箱已存在')); } })) }else{ callback(new Error('请输入正确的邮箱地址')); } }else{ callback(new Error('请填写邮箱')); } }
。
浙公网安备 33010602011771号