常用的表單驗證程式碼分享

表單驗證是必須的環節，下面就分享一下比較常用的表單驗證的一些程式碼片段。

感興趣的朋友可以做一下積累，以便於使用的時候隨時查詢。

一.使用者名稱驗證:

[JavaScript] 純文字檢視 複製程式碼
function vailNickName() {
  var nickName = jQuery("#nickName").val();
  var flag = false;
  var message = "";
  var patrn = /^\d+$/;
  var length = getNickNameLength();
  if (nickName == '') {
    message = "暱稱不能為空！";
  } else if (length < 4 || length > 16) {
    message = "暱稱為4-16個字元！";
  } else if (checkNickNameIsExist()) {
    message = "該暱稱已經存在，請重新輸入！";
  } else {
    flag = true;
  }
  if (!flag) {
    jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-error");
    jQuery("#nickNameP").html("");
    jQuery("#nickNameP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>" + message);
    //jQuery("#nickName").focus();
  } else {
    jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-success");
    jQuery("#nickNameP").html("");
    jQuery("#nickNameP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該暱稱可用");
  }
  return flag;
}

二.使用者名稱長度驗證:

[JavaScript] 純文字檢視 複製程式碼
function getNickNameLength() {
  var nickName = jQuery("#nickName").val();
  var len = 0;
  for (var i = 0; i < nickName.length; i++) {
    var a = nickName.charAt(i);
 
    //函式格式：stringObj.match(rgExp) stringObj為字串必選 rgExp為正規表示式必選項
    //返回值：如果能匹配則返回結果陣列，如果不能匹配返回null
    if (a.match(/[^\x00-\xff]/ig) != null) {
      len += 2;
    } else {
      len += 1;
    }
  }
  return len;
}

三.驗證使用者名稱是否存在:

這樣當然需要後臺語言的配合，具體可以參閱驗證郵箱是否已經註冊介紹一章節。

四.密碼驗證:

[JavaScript] 純文字檢視 複製程式碼
function vailPwd() {
  var password = jQuery("#password").val();
  var flag = false;
  var message = "";
  var patrn = /^\d+$/;
  if (password == '') {
    message = "密碼不能為空！";
  }
  else if (password.length < 6 || password.length > 16) {
    message = "密碼6-16位！";
  } else if (patrn.test(password)) {
    message = "密碼不能全是數字！";
  } else {
    flag = true;
  }
  if (!flag) {
    jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-error");
    jQuery("#passwordP").html("");
    jQuery("#passwordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>" + message);
    //jQuery("#password").focus();
  } else {
    jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-success");
    jQuery("#passwordP").html("");
    jQuery("#passwordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>該密碼可用");
  }
  return flag;
}

五.確認密碼驗證:

[JavaScript] 純文字檢視 複製程式碼
function vailConfirmPwd() {
  var confirmPassword = jQuery("#confirm_password").val();
  var patrn = /^\d+$/;
  var password = jQuery("#password").val();
  var flag = false;
  var message = "";
  if (confirmPassword == '') {
    message = "請輸入確認密碼！";
  } else if (confirmPassword != password) {
    message = "二次密碼輸入不一致，請重新輸入！";
  } else if (patrn.test(password)) {
    message = "密碼不能全是數字！";
  } else {
    flag = true;
  }
  if (!flag) {
    jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-error");
    jQuery("#confirmPasswordP").html("");
    jQuery("#confirmPasswordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>" + message);
    //jQuery("#confirm_password").focus();
  } else {
    jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-success");
    jQuery("#confirmPasswordP").html("");
    jQuery("#confirmPasswordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>密碼正確");
  }
  return flag;
}