常用的表单验证代码分享

日期: 2022-12-08 13:43:13 分类: 前端浏览量：留言数： 98366

表单验证是必须的环节，下面就分享一下比较常用的表单验证的一些代码片段。

感兴趣的朋友可以做一下积累，以便于使用的时候随时查找。

一.用户名验证:

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;
}

二.用户名长度验证:

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;
}

三.验证用户名是否存在:

这样当然需要后台语言的配合，具体可以参阅验证邮箱是否已经注册介绍一章节。

四.密码验证:

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;
}

五.确认密码验证:

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;
}