牛骨文教育服务平台(让学习变的简单)
博文笔记

element ui 和mint ui表单验证*必填

创建时间:2017-12-08 投稿人: 浏览次数:807
//js控制不了时就写在行内控制
<el-form-item label="教师姓名" prop="UserId" :rules="[{ required: true, message: "班级不能为空"}]" class="el-select-class">
	<el-select v-model="newClassForm.UserId" placeholder="请选择教师姓名">
		<el-option v-for="item in selectTeachers" :key="item.UserId" :label="item.RealName" :value="item.UserId">	
		</el-option>
	</el-select>
</el-form-item>
//新建班级页面验证
newClassFormRules:{
	Name: [{ required: true, message: "请输入班级名称", trigger: "blur" }], 
	ClassType: [{ required: true, message: "请输入年级名称", trigger: "change" }], 
	UserId: [{ required: true, message: "请输入教师姓名", trigger: "change" }] 
}
//更新:发现之前是错误的,没研究透彻:type:Number/String/Array/Function/Booleans ,trigger:"blur,change";  
popFormRules: {  
    Name: [{  
        required: true,  
        message: "请输入机构名称",  
        trigger: "blur,change"  
    }, {  
        min: 1,  
        max: 15,  
        message: "长度在 1到15个字",  
        trigger: "blur"  
    }],  
    AllianceName: [{  
        required: true,  
        message: "请选择加盟商",  
        trigger: "change"  
    }],  
    Citys: [{  
        type: "array",  
        required: true,  
        message: "请选择地区",  
        trigger: "change"  
    }],  
    Stock: [{  
        required: true,  
        message: "请输入库存",  
        trigger: "blur,change"  
    }, {  
        min: 1,  
        max: 8,  
        message: "长度在 1到8 个字符",  
        trigger: "blur"  
    }],
  PhoneNumber: [{
	required: true,
	validator: updatePhone,
	trigger: "blur"
}]
}


var updatePhone = (rule, value, callback) => {
	let editForm = this.editForm;
	if(!value) {
		return callback(new Error("手机号不能为空"));
	}
	setTimeout(() => {
		if(!Number(value)) {
			callback(new Error("请输入数字值"));
		} else {
			if(value.length !== 11) {
				callback(new Error("手机号是11位"));
			} else {
				this.$http
					.get("/rc_teahcer/checkPhoneNumber", {
						params: {
							PhoneNumber: value,
							Id: editForm.Id
						}
					})
					.then(res => {
						if(res.data == true) {
							callback();
						} else {
							callback(new Error("该用户已存在!"));
						}
					});
			}
		}
	}, 1000);
};
vue+element表单验证的添加步骤 
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。