js-提交表单前的参数检测

经常做H5收集用户信息,对表单参数检测一块经常重复造轮子,索性造了一个通用的轮子。

暂时只收集input,select,textarea三种元素的数据,各位看官若觉得有趣,可自行扩展。


/*
 *  自动检测获取自定义form中的数据,收集input,select,textarea元素的数据
 *  为元素添加以下属性可以自定义字段属性
 *  necessary 必须字段,检测非空
 *  errmsg 必须字段为空时提示信息
 *  ignore 忽略字段,不收集
 *  format 特殊格式字段,目前有mobile、qq、age,检测格式
 *  formatErrMsg 特殊格式字段检测不通过时提示信息
 *  return 
 *  {errcode: 0, errmsg: "", data: { name1: value1,...}}
 *  检测不通过时 errcode 不为0 ,errmsg为错误信息
 *  data内非ignore字段的值
*/
$.fn.checkForm = function(){
  if(this.length == 0){
    return null;
  }

  var result = {errcode: 0, errmsg: "", data: {}};
  var obj = this.eq(0);
  
  var el = obj.find("input, select, textarea");
  el.each(function(){
    if( this.getAttribute("ignore") !== null ) return;  //忽略
    //console.log(this.getAttribute("necessary"))

    switch(this.type){
      case "checkbox":
        result.data[this.name] = this.checked;
        break;
      default:
        result.data[this.name] = this.value;
        break;
    }
    if(this.getAttribute("necessary") !== null){
      if( $.trim(this.value) === "" && result.errcode == 0){
        result.errcode = -1;
        var errmsg = this.getAttribute("errmsg");
        result.errmsg = errmsg ? errmsg : "请填写完整信息再提交~";        
      }
    }

    var format = this.getAttribute("format");
    if( format !== null ){
      var flag = true;
      switch(format.toLowerCase()){
        case "mobile":
          if( !result.data[this.name].match(/^1(3|4|5|7|8)[0-9]{9}$/) && result.errcode == 0){
            result.errcode = -2;
            var formatErrMsg = this.getAttribute("formatErrMsg");
            result.errmsg = formatErrMsg ? formatErrMsg : "手机号码格式有误~";
            return;
          }
          break;
        case "qq":
          if( isNaN( result.data[this.name] ) && result.errcode == 0 ){
            result.errcode = -2;
            var formatErrMsg = this.getAttribute("formatErrMsg");
            result.errmsg = formatErrMsg ? formatErrMsg : "QQ号码格式有误~";
          }
          break;
        case "age":
          if( (isNaN( result.data[this.name] ) || Number(result.data[this.name]) < 1) && result.errcode == 0 ){
            result.errcode = -2;
            var formatErrMsg = this.getAttribute("formatErrMsg");
            result.errmsg = formatErrMsg ? formatErrMsg : "请填写正确的年龄~";
          }
          break;
        default:
          break;
      }
    }
  })
  if(result.errcode != 0){
    console.log(result);
  }
  return result;
}

使用方法:

Html设置:

<div class="form">
    <div class="nameBox infoBox">
    	<div class="item-tle l">姓  名:</div>
        <div class="item-val l">
            <input type="text" name="name" necessary>
        </div>
    </div>
    <div class="mobileBox infoBox">
    	<div class="item-tle l">电  话:</div>
        <div class="item-val l">
            <input type="tel" name="mobile" necessary format="mobile" formatErrMsg="手机号码格式有误~请检查">
        </div>
    </div>
    <div class="addressBox infoBox">
    	<div class="item-tle l">城  市:</div>
        <div class="provinceBox l">
            <select name="province" necessary errmsg="请选择省份"></select>
        </div>
        <div class="cityBox l">
            <select name="city" necessary errmsg="请选择城市"></select>
        </div>
    </div>
    <div class="storeBox infoBox">
    	<div class="item-tle l">体验中心:</div>
        <div class="item-val l">
            <select name="store"></select>
        </div>
    </div>
    <input type="hidden" name="check" value="1" necessary >
</div>

js获取:

var result = $(".form").checkForm();
if(result.errcode != 0){
  alert(result.errmsg);
  return;
}

var postData = result.data;

@Dantis



相关文章

  • 没有相关文章!
3 吐槽
  1. dantis

    Dantis留下一个水槽并向你丢了一个大板砖

  2. dzc

    dzc留下一个水槽并向你丢了一个大板砖

  3. 路人甲 留下一个水槽并向你丢了一个大板砖

欢迎吐槽丢砖~点赞也行