JQuery表单验证

常用表单主要包括：用户名–密码–确认密码–邮箱–验证码

初学阶段我们忽略验证码的真实性，仅对齐进行非空验证

表单代码

<div id="content"><div class="login_form"><div class="login_box"><div class="tit"><h1>注册会员</h1><span class="errorMsg"></span><!--//错误信息提醒--></div><div class="form"><form action="regist_success.html"><label>用户名称：</label><input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" /><br /><br /><label>用户密码：</label><input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" /><br /><br /><label>确认密码：</label><input class="itxt" type="password" placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" /><br /><br /><label>电子邮件：</label><input class="itxt" type="text" placeholder="请输入邮箱地址" autocomplete="off" tabindex="1" name="email" id="email" /><br /><br /><label>验证码：</label><input class="itxt" type="text" style="width: 150px;" id="code"/><img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">									<br /><br /><input type="submit" value="注册" id="sub_btn" /></form></div></div></div></div>

效果图

事前准备：

1. 导入jquery库，我才用为jquery1.72

2. 正则表达式API

   常用正则表达式
   用户名	/1{3,16}$/
   密码	/2{6,18}$/
   电子邮箱	/^([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6})$/

表单内容校验的通用步骤为

1. 获取输入框内容$("#id").val( );
2. 创建正则表达式
3. 使用test方法验证
4. 提示用户

具体代码实现如下

	<script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script><script type="text/javascript">$(function () {$("#sub_btn").click(function () {//检测用户名合法  获取用户名输入的内容--创建正则表达式--使用test方法检验是否合法--提示用户var usernameText = $("#username").val();var userPatt = /^\w{5,12}/;if (!userPatt.test(usernameText)){$("span.errorMsg").text("Error用户名不合法");return false;}//验证密码合法var passwordText = $("#password").val();var passPatt = /^\w{5,12}/;if (!passPatt.test(passwordText)){$("span.errorMsg").text("Error密码不合法");return false;}//确认密码var password2 = $("#repwd").val();if (passwordText!=password2){$("span.errorMsg").text("两次密码不一致");return false;}//邮箱验证--同用户名验证var emaiText = $("#email").val();var emailPatt = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;if (!emailPatt.test(emaiText)){$("span.errorMsg").text("邮箱不合法");return false;}var RcodeText = $("#code").val();//去空格RcodeText = $.trim(RcodeText);if (RcodeText==null || RcodeText==""){$("span.errorMsg").text("验证码错误");return false;}$("span.errorMsg").text("");});});</script>

效果如图

---

1. a-z0-9_- ↩︎

2. a-z0-9_- ↩︎