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 }
        ]
      }
    };
上一篇下一篇

猜你喜欢

热点阅读