zoukankan      html  css  js  c++  java
  • 关于element表单校验(二)

    动态表单添加和校验

     如图点击+号,就会添加一个联系方式

      

    html代码,其实这里主要注意html代码的不同,js的代码跟普通的校验没什么区别

    <el-col :span="12">
        <el-form-item v-if="index==0" label="联系方式:" :prop="'information.' + index + '.phone'" :rules="selfSubmitDataRule.phone" class="phone-form">
             <el-input v-model="item.phone" placeholder="请输入联系方式" :disabled="ifCanEdit||overTimeLock"></el-input>
        </el-form-item>
        <el-form-item  v-else label="联系方式:" :prop="'information.' + index + '.phone'" :rules="selfSubmitDataRule.phone1" class="phone-form">
              <el-input v-model="item.phone" placeholder="请输入联系方式" :disabled="ifCanEdit||overTimeLock"></el-input>
          </el-form-item>
    </el-col>

    js代码

    data(){
      var telephoneNumber = (rule, value, callback) => {
          if (!value) {
            return callback(new Error("联系方式不能为空"));
          } else {
            const reg1 = /^1[3|4|5|7|8][0-9]d{8}$/;
            // const reg2 = /^((0d{2,3}-d{7,8})|(1[3584]d{9}))$/;
            if (reg1.test(value)) {
              callback();
            } else {
              return callback(new Error("请填写正确的手机号"));
            }
          }
        };  
      return {
           selfSubmitDataRule: {
            phone: [
              {
                required: true,
                validator: telephoneNumber,
                trigger: "blur",
                max: 11
              }
            ]
          },  
        }  
    }
  • 相关阅读:
    JSP(一)
    Servlet(二)
    Servlet(一)
    学而不思则罔,思而不学则殆
    spark运行模式之 ===> Standalone
    spark的运行模式之 ==> 本地运行模式
    Hbase Java API 测试代码
    hive的UDF函数 示例==> 时间格式转换
    自己编写MapReduce实现 Hive 的 join
    进阶程序 ==> 二次排序
  • 原文地址:https://www.cnblogs.com/Jerry1208/p/12701045.html
Copyright © 2011-2022 走看看