常用的表单验证代码分享

快乐打工仔 分类:实例代码

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

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

一.用户名验证:

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;
}
常用的表单验证代码分享

回复

我来回复
  • 暂无回复内容