jQuery正则表达式实现表单验证功能（注册）
生活随笔
收集整理的這篇文章主要介紹了
jQuery正则表达式实现表单验证功能（注册）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>關聯(lián)手機號：</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>
總結
以上是生活随笔為你收集整理的jQuery正则表达式实现表单验证功能（注册）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： obs可以装手机吗?_原神PC和手机数据
- 下一篇： 标准误计算机excel公式,关于exce