表单验证的多种方法

1.含有文字提示 

//html：
 <form onSubmit="return inputNull(this)">
        <div class="form-group">
          <label for="exampleInputEmail1">姓名</label>
          <input type="name" class="form-control" id="name" placeholder="请输入您的姓名" name="username">
        </div>
        <div class="call" id="callone" style="color: red;display: none; margin-top: -10px;">提示</div>

        <div class="form-group">
          <label for="exampleInputPassword1">电话</label>
          <input type="tel" class="form-control" id="tel" placeholder="请输入您的电话号码" name="phone">
        </div>
        <div class="call" id="calltwo" style="color: red; display: none;margin-top: -10px;">提示</div>
  </form>

//jquery:
<script type="text/JavaScript">
  
  // 姓名验证
  $("#name").blur(function () {
            var nameVal = $("#name").val(); //获取值
            var CellPoe = /^[\u4e00-\u9fa5]{2,15}$/; //正则
           //输入框失去焦点后未获取值
            if (nameVal == ""){
              $("#name").val("") 
              $("#callone").css('display','block'); //显示提示
              $("#callone").html("姓名必填!")   //提示内容
            } 
         //判断输入值不符合正则
            else if (!CellPoe.test(nameVal)) {
              $("#name").val("") //清空输入框
              $("#callone").css('display','block'); 
              $("#callone").html("姓名格式填写错误!")

            }else{
              $("#callone").css('display','none'); 
                
                }
        });
        
       
    // 手机号信息验证（11位数）
    $("#tel").blur(function () {
                var telVal =$("#tel").val();
             
                var CellPoe = /^[1][3,4,5,7,8][0-9]{9}$/;   //手机号信息验证（11位数）
              
                if(telVal == ""){
                  $("#tel").val("")
                    $("#calltwo").css('display','block'); 
                $("#calltwo").html("手机号必填!")

              //     $("#tel").val("手机号必填!").css("color","red")
              //     $("#tel").click(function(){
              //       $("#tel").val("").css("color","")
              
                }
                else if (!CellPoe.test(telVal )) {
                  $("#tel").val("")
                  $("#calltwo").css('display','block'); 
                $("#calltwo").html("请输入正确的11位手机号!")
                } else{
                  $("#calltwo").css('display','none'); 
                
                }
            });
</script>

2.vue + elementui 校验

//中文  可输入中文、数字、符号 
 let validatepesticideCName = (rule, value, callback) => {
      if (!value) {
        //this.$refs.imgUpload 这个打印一下就知道要的判断条件
        callback(new Error("XX中文名称不能为空"));
      } else {
        if (/[a-zA-z]$/.test(value) == true) {
          callback(new Error("请输入中文"));
        } else {
          callback();
        }
      }
    };
//英文 可输入英文、数字、符号 
    let validatepesticideEnName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("XX英文名称不能为空"));
      } else {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error("请输入英文"));
        } else {
          callback();
        }
      }
    };
//座机和传真 可共用此正则 
 var checkfax = (rule, value, callback) => {
      var faxReg = /^(\d{3,4}-)?\d{7,8}$/; //座机和传真格式是一样的：区号-号码
      if (!value) {
        return callback(new Error("传真不能为空"));
      }
      setTimeout(() => {
        if (!faxReg.test(value)) {
          callback(new Error("请输入正确的传真"));
        } else {
          callback();
        }
      }, 100);
    };
//手机号11位
    var checkphone = (rule, value, callback) => {
      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;

      if (value === "") {
        callback(new Error("请输入电话"));
      } else if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("请输入正确的手机号"));
      }
    };
//邮编6位
    var checkpostcode = (rule, value, callback) => {
      // const reg = /^[1-9][0-9]{5}$/;
      var reg = /^[0-9]{6}$/;
      if (value === "") {
        callback(new Error("邮编不能为空"));
      } else if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("请输入正确的邮编"));
      }
    };
//手机号或座机号 都可校验
    var checkphone = (rule, value, callback) => {
      var reg = "";
      if (!value) {
        return callback(new Error("联系电话不能为空"));
      }
      if (value.indexOf("-") != -1) {
        //座机 010-xxx
        reg = /^(\d{3,4}-)?\d{7,8}$/; //座机和传真格式是一样的：区号-号码
        setTimeout(() => {
          if (!reg.test(value)) {
            callback(new Error("请输入正确的座机联系电话"));
          } else {
            callback();
          }
        }, 100);
      } else {
        reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        setTimeout(() => {
          if (!reg.test(value)) {
            callback(new Error("请输入正确的手机联系电话"));
          } else {
            callback();
          }
        }, 100);
      }
    };

//js：文件上传校验  
 let validateaddrImg = (rule, value, callback) => {
      if (this.dataForm.addrImg.length < 1) {
        //this.$refs.imgUpload 这个打印一下就知道要的判断条件
        callback(new Error("请上传XX照片"));
      } else {
        callback();
      }
    };
注：上传成功后清除校验
   // method 清空文件上传校验
    clearFileUploadValidate(num) {
      if (num == 1) {
        this.$refs.dataForm.clearValidate("addrImg");
      } else {
        this.$refs.dataForm.clearValidate("makeImg");
      }
    },