jQuery正则表达式实现表单验证功能（注册）

美奇开发工作室
于 2018-03-11 15:28:20 发布
阅读量4.1k
点赞数 2
分类专栏： # jQuery
本文链接：https://blog.csdn.net/qq15577969/article/details/79516783
版权
jQuery 专栏收录该内容
28 篇文章 2 订阅
订阅专栏
 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易新用户注册页面</title>
    <link  rel="stylesheet" href="css/register.css" />
<style type="text/css">
/*当鼠标放到文本框时，提示文本的样式*/
.import_prompt{
border:solid 1px #ffcd00;
background-color:#ffffda;
padding-left:5px;
padding-right:5px;
line-height:20px;
}
/*当文本框内容不符合要求时，提示文本的样式*/
.error_prompt{
border:solid 1px #ff3300;
background:#fff2e5 url(../images/li_err.gif)5px 2px  no-repeat;
padding:2px 5px 0px 25px;
line-height:20px;
}
/*当文本框内容输入正确时，提示文本的样式*/
.ok_prompt{
border:solid 1px #01be00;
background:#e6fee4 url(../images/li_ok.gif) 5px 2px no-repeat;
padding:2px 5px 0px 25px;
line-height:20px;
}
</style>
</head>

<body>
<div id="header"><img src="images/register_logo.gif" alt="logo"/></div>
<div id="main">
                <form id="registerForm" action="" method="post" name="myform">
                    <dl>
                        <dt>通行证用户名：</dt>
                        <dd><input type="text" id="userName" class="inputs userWidth"/> @163.com</dd>
                        <dd><div id="userNameId"></div></dd>
                    </dl>
                    <dl>
                        <dt>登录密码：</dt>
                        <dd><input type="password" id="pwd" class="inputs"/></dd>
                        <dd><div id="pwdId"></div></dd>
                    </dl>
                    <dl>
                        <dt>重复登录密码：</dt>
                        <dd><input type="password" id="repwd" class="inputs"/></dd>
                        <dd><div id="repwdId"></div></dd>
                    </dl>
                    <dl>
                        <dt>性别：</dt>
                        <dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd>
                    </dl>
                    <dl>
                        <dt>昵称：</dt>
                        <dd><input type="text" id="nickName" class="inputs"/></dd>
                        <dd><div id="nickNameId"></div></dd>
                    </dl>
                    <dl>
                        <dt>关联手机号：</dt>
                        <dd><input type="text" id="tel" class="inputs"/></dd>
                        <dd><div id="telId"></div></dd>
                    </dl>
                    <dl>
                        <dt>保密邮箱：</dt>
                        <dd><input type="email" id="email" class="inputs"/></dd>
                        <dd><div id="emailId"></div></dd>
                    </dl>
                    <dl>
                        <dt></dt>
                        <dd><input name=" " type="image" src="images/button.gif"/></dd>
                    </dl>
                </form>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   //失去焦点时，开始验证
   $("#userName").blur(checkUser); 
   $("#pwd").blur(checkPwd); 
   $("#repwd").blur(checkRepwd); 
   $("#nickName").blur(checkNick); 
   $("#tel").blur(checkTel);
   $("#email").blur(checkEmail);
   //提交表单
   $("form").submit(function(){
  var flag=true;
  if(!checkUser()) flag=false;
  if(!checkPwd()) flag=false;
  if(!checkRepwd()) flag=false;
  if(!checkNick()) flag=false;
  if(!checkTel()) flag=false;
  if(!checkEmail()) flag=false;
           if(!checkSex()) flag=false;
  return flag;
});
});
//验证邮箱
function checkEmail(){
var email=$("#email").val().trim();
var regemail=/^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/; //正则表达式
if(regemail.test(email)==false){
$("#emailId").addClass("error_prompt").removeClass("ok_prompt");
$("#emailId").html("请输入您常用的电子邮箱");
return false;
}else{
$("#emailId").addClass("ok_prompt").removeClass("error_prompt");
$("#emailId").html("邮箱输入正确");
return true;
}
}
//验证手机号
function checkTel(){
var tel=$("#tel").val().trim();
var regtel=/^(13|15|18)[0-9]{9}$/;
if(regtel.test(tel)==false){
$("#telId").addClass("error_prompt").removeClass("ok_prompt");
$("#telId").html("手机号只能是以13、15、18开头的11位数字");
}else{
$("#telId").addClass("ok_prompt").removeClass("error_prompt");
$("#telId").html("手机号输入正确");
}
}
//验证昵称
function checkNick(){
var nick=$("#nickName").val().trim();
var regnick=/^([\u4e000-\u9fa5]|\w|[@!#$%*])+$/;
var len=nick.replace("/[\u4e000-\u9fa5]/g","xx").length;//计算字符串长度，一个汉字表示2个字符
if(regnick.test(nick)==false){
$("#nickNameId").addClass("error_prompt").removeClass("ok_prompt");
$("#nickNameId").html("昵称由汉字、字母、数字、下划线，<br/>以及@、！、#、$、%\*等特殊字符组成，长度为4-20个字符");
}else if(len<4||len>20){
$("#nickNameId").addClass("error_prompt").removeClass("ok_prompt");
$("#nickNameId").html("昵称长度为4-20个字符");
}
else{
$("#nickNameId").addClass("ok_prompt").removeClass("error_prompt");
$("#nickNameId").html("昵称输入正确");
}
}
//验证用户名
function checkUser(){
var user=$("#userName").val().trim();
var reguser=/^[a-zA-Z0-9](\w|.|-){2,16}[a-zA-Z0-9]$/;
if(reguser.test(user)==false){
$("#userNameId").addClass("error_prompt").removeClass("ok_prompt");
$("#userNameId").html("1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，组长度为4-18");
}else{
$("#userNameId").addClass("ok_prompt").removeClass("error_prompt");
$("#userNameId").html("用户名输入正确");
}
}
//验证密码
function checkPwd(){
var pwd=$("#pwd").val().trim();
var regpwd=/^[0-9a-zA-Z]{4,18}$/;
if(regpwd.test(pwd)==false){
$("#pwdId").addClass("error_prompt").removeClass("ok_prompt");
$("#pwdId").html("密码由英文字母和数字组成的4-18位字符");
return false;
}else{
$("#pwdId").addClass("ok_prompt").removeClass("error_prompt");
$("#pwdId").html("密码输入正确");
return true;
}
}
//确认密码
function checkRepwd(){
var pwd=$("#pwd").val().trim();
var repwd=$("#repwd").val().trim();
if(pwd==""){
$("#repwdId").html("");
return false;
}
if(repwd!=pwd){
$("#repwdId").addClass("error_prompt").removeClass("ok_prompt");
$("#repwdId").html("两次密码输入不一致");
return false;
}else{
$("#repwdId").addClass("ok_prompt").removeClass("error_prompt");
$("#repwdId").html("输入正确");
return true;
}
}
        //验证性别
function checkSex(){
var sex=$("[name=sex]:checked").val();
if(sex==null){
$("#sexId").css("color","#F00");
alert("请选择性别");
return false;
}else{
return true;
}
}
</script>
</body>
</html>