美文网首页
vue.js 创作我的创作,记录不懂的东西(rules验证)

vue.js 创作我的创作,记录不懂的东西(rules验证)

作者: queue | 来源:发表于2018-12-20 17:37 被阅读0次

    初学,不对的地方发现后再修改
    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 }
            ]
          }
        };
    

    相关文章

      网友评论

          本文标题:vue.js 创作我的创作,记录不懂的东西(rules验证)

          本文链接:https://www.haomeiwen.com/subject/mbzykqtx.html