处理表单验证

采用遍历表单输入框的方式由上向下逐个校验,而不是先得到每个文本框的jQuery对象,再去单个进行检验,这样多了命名,以及后续维护的难度。

var title = {
  name: "姓名",
  mobile: "联系电话",
  email: "联系邮箱",
  code: "验证码"
};
$(".submit").on("click", function() {
  if (verifyForm()) {
    // ...
    $(this).attr({ "disabled": "disabled" });
  }
});
// 表单验证
function verifyForm() {
  var result = 1;
  // 遍历文本输入框校验输入是否为空、格式是否正确
  $("input").each(function(index, ele) {
    var val = ele.value.trim(),
      name = ele.name;
    if (!val) {
      alert(title[name] + "不能为空");
      result = 0;
    } else {
      if (ele.name == "mobile") {
        if (!(/^1[34578]\d{9}$/.test(val)) || !/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(val)) {
          alert("联系电话有误,请重填");
          result = 0;
        }
      }
      if (ele.name == "email") {
        if (!(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(val))) {
          alert("邮箱格式有误,请重填");
          result = 0;
        }
      }
    }
  })
  return result;
};

1 评论

发表评论