vue.js 创作我的创作,记录不懂的东西(rules验证)
2018-12-20 本文已影响0人
queue
初学,不对的地方发现后再修改
prop绑定communityName,再通过rules方法验证,格式如下
trigger: "blur" 表示“当失去焦点时(光标不显示的时候),触发此提示”
此处应该是有一个校验,若失去焦点,则触发trigger进行校验,若校验不成功,则进行提示
required 表示必填
<el-form :rules="rules" ref="dataForm" :model="temp">
<el-form-item :label="$t('table.communityName')" prop="communityName">
<el-input v-model="temp.communityName"></el-input>
</el-form>
rules: {
communityName: [
{ required: true, message: "网点名称必填", trigger: "blur" },
{ min: 0, max: 20, message: "长度在0到20个字符" },
{
pattern: /^[A-Za-z\u4e00-\u9fa5]+$/,
message: "只能输入个字母、汉字"
}
],
province: [{ required: true, message: "请选择省", trigger: "blur" }],
city: [{ required: true, message: "请选择市", trigger: "blur" }],
district: [{ required: true, message: "请选择区", trigger: "blur" }],
addressDetail: [
{ required: true, message: "详细地址是必填项", trigger: "blur" },
{ min: 0, max: 80, message: "长度在0到80个字符" }
],
communityUser: [
{ required: true, message: "联系人是必填项", trigger: "blur" },
{ min: 0, max: 20, message: "长度在0到20个字符" },
{
pattern: /^[A-Za-z\u4e00-\u9fa5]+$/,
message: "只能输入个字母、汉字"
}
],
communityTel: [
{ required: true, trigger: "blur", validator: validatephone }
]
}
};