分享一篇最近新写的jquery注册页面表单校验的程序，仅供参考
程序员文章站
2022-05-18 11:02:20
页面效果： 只是测试了一部分功能，因篇幅有限，不能测试全面，有什么问题，欢迎留言一起学习！ 里面的正则表达式，参考小编的前几篇文章，有资源连接的 ......
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>英雄联盟成员注册</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
table{color:red}
caption{font-size: 25px;font-family: "微软雅黑";color: forestgreen;}
*{font-family: "微软雅黑";}
</style>
<script type="text/javascript">
/*全局变量及初始化页面状态*/
//获取验证码
function getcode(){
varrand = parseint(math.random()*9000+1000);//生成随机数
$("#spancodeid").html(varrand);//将生成的随机数赋值到span标签中
}
//声明验证码变量
var varrand = 0;
//声明密码变量
var varpwd;
$(function(){
getcode();
})
//校验验证码
function codetest(){
var varcode = $("#codeid").val();//获取验证码文本框的内容
if(varcode == 0){
//如果没有内容，提示输入验证码
$("#spancodeid2").html("验证码不能为空！");
return false;
}else if(varcode == varrand){
//如果验证输入正确，提示成功
$("#spancodeid2").html("<span style='color: green;font-size: 13px;'>√</span>");
return true;
}else{
//否则提示验证码输入错误
$("#spancodeid2").html("验证码输入错误！");
return false;
}
}
//用户名校验
function unametest(){
//获取用户名
var varuname = $("#unameid").val();
//声明正则表达式，表示用户名规则:
var varreg = /^[\u4e00-\u9fa5]{1,6}$/;
if(varuname.length == 0){
//如果没有内容，提示输入用户名
$("#spanunameid").html("英雄昵称不能为空！");
return false;
}else if(varreg.test(varuname)){
$("#spanunameid").html("<span style='color: green;font-size: 14px;'>√</span>");
return true;
}else{
$("#spanunameid").html("英雄昵称必须为1-6个汉字");
return false;
}
}
//真实姓名校验
function realnametest(){
//获取用户名
var varrealname = $("#realnameid").val();
//声明正则表达式，表示用户名规则:1-6个汉字
var varreg = /^[\u4e00-\u9fa5]{1,6}$/;
if(varrealname.length == 0){
//如果没有内容，提示输入用户名
$("#spanrealnameid").html("真实姓名不能为空！");
return false;
}else if(varreg.test(varrealname)){
$("#spanrealnameid").html("<span style='color: green;font-size: 14px;'>√</span>");
return true;
}else{
$("#spanrealnameid").html("真实姓名必须为1-6个汉字");
return false;
}
}
//密码校验
function pwdtest(){
//获取密码
varpwd = $("#pwdid").val();
//声明正则表达式，表示用户名规则:数字和字母，不少于4个
var varreg = /^[a-za-z0-9]{4,40}$/;
if(varpwd.length == 0){
//如果没有内容，提示输入密码
$("#spanpwdid").html("密码不能为空！");
return false;
}else if(varreg.test(varpwd)){
$("#spanpwdid").html("<span style='color: green;font-size: 14px;'>√</span>");
return true&&pwdtest2();
}else{
$("#spanpwdid").html("密码必须为4-40个数字和字母的组合");
return false;
}
}
//确认密码校验
function pwdtest2(){
//获取确认密码
var varpwd2 = $("#pwdid2").val();
if(varpwd2.length == 0){
//如果没有内容，提示输入密码
$("#spanpwdid2").html("密码不能为空！");
return false;
}else if(varpwd2 === varpwd){
$("#spanpwdid2").html("<span style='color: green;font-size: 14px;'>√</span>");
return true;
}else{
$("#spanpwdid2").html("密码输入错误");
return false;
}
}
//个人介绍校验
function myselftest(){
//获取个人介绍内容
var varmyself = $("#myselfid").val();
//声明正则表达式，表示用户名规则:所有字符，至少10个
var varreg = /^.{10,160}$/;
if(varmyself.length == 0){
//如果没有内容，提示不能为空
$("#spanmyselfid").html("个人介绍不能为空！");
return false;
}else if(varreg.test(varmyself)){
$("#spanmyselfid").html("<span style='color: green;font-size: 14px;'>√</span>");
return true;
}else{
$("#spanmyselfid").html("个人介绍的字符必须在10到160个字符！");
return false;
}
}
//籍贯校验
function statetest(){
//获取下拉框内容
var varstate = $("#stateid").val();
if(varstate == 0){
//如果没有内容，提示籍贯不能为空
$("#spanstateid").html("籍贯不能为空！");
return false;
}else {
$("#spanstateid").html("<span style='color: green;font-size: 14px;'>√</span>");
return true;
}
}
//英雄定位校验
function favtest(){
var varfav = $("input[name=fav]");
for(var i = 0;i<varfav.length;i++){
if(varfav[i].checked){
$("#spanfavid").html("<span style='color: green;font-size: 14px;'>√</span>");
return true;//结束程序
}
}
$("#spanfavid").html("英雄定位至少选择一样！");
return false;
}
//将同意协议事件和注册事件进行绑定
// $(function(){
// $("#checkid").on("click",function(){
// $("#subid").attr("disabled",false);
// });
// });
function checktest(){
$("#subid").prop("disabled",!$("#checkid").prop("checked"));
}
//提交和重置校验
function isreset(){
var varbool = window.confirm("是否确定要重置信息？");
return varbool;
}
function issubmit(){
var varbool = codetest()&&unametest()&&realnametest()&&pwdtest()&&pwdtest2()&&myselftest()&&statetest();
return varbool;
}
</script>
</head>
<body style="background-color: antiquewhite;">
<form action="#" onsubmit="return issubmit()" onreset="return isreset()">
<table class="table table-hover" style="width: 580px;" align="center">
<caption>欢迎注册英雄联盟</caption>
<tbody>
<tr>
<td width="100px">英雄昵称：</td>
<td>
<input type="text" name="uname" id="unameid" placeholder="请输入英雄昵称！" value="" onblur="unametest()"/>
<span id="spanunameid"></span>
</td>
</tr>
<tr>
<td>真实姓名：</td>
<td>
<input type="text" name="realname" id="realnameid" placeholder="请输入真实姓名！" value="" onblur="realnametest()"/>
<span id="spanrealnameid"></span>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd" id="pwdid" placeholder="请输入密码！" value="" onblur="pwdtest()"/>
<span id="spanpwdid"></span>
</td>
</tr>
<tr>
<td>确认密码：</td>
<td>
<input type="password" name="pwd2" id="pwdid2" placeholder="请确认密码！" value="" onblur="pwdtest2()"/>
<span id="spanpwdid2"></span>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女
<span id="spansexid"></span>
</td>
</tr>
<tr>
<td>籍贯：</td>
<td>
<select name="state" style="width: 180px;" id="stateid" onblur="statetest()">
<option value="0">--请进行选择--</option>
<option value="1">--艾欧尼亚--</option>
<option value="2">--德玛西亚--</option>
<option value="3">--班德尔城--</option>
<option value="4">--暗影岛--</option>
<option value="5">--虚空--</option>
<option value="6">--巨神峰--</option>
</select>
<span id="spanstateid"></span>
</td>
</tr>
<tr>
<td>英雄定位：</td>
<td>
<input type="checkbox" name="fav" value="a" onclick="favtest()"/>法师
<input type="checkbox" name="fav" value="b" onclick="favtest()"/>射手
<input type="checkbox" name="fav" value="c" onclick="favtest()"/>刺客
<input type="checkbox" name="fav" value="d" onclick="favtest()"/>战士
<input type="checkbox" name="fav" value="d" onclick="favtest()"/>坦克
<input type="checkbox" name="fav" value="d" onclick="favtest()"/>辅助
<span id="spanfavid"></span>
</td>
</tr>
<tr>
<td>自我介绍：</td>
<td height="130px">
<textarea name="myself" id="myselfid" rows="4" cols="40" value="" onblur="myselftest()"></textarea>
<span id="spanmyselfid"></span>
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text" id="codeid" value="" maxlength="4" size="4" value="" onblur="codetest()"/>
<span id="spancodeid" style="color: green;" onclick="getcode()"></span>
<span id="spancodeid2"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="checkid" onclick="checktest()"/>您是否同意峡谷生存规则！
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="subid" value="注册" disabled="true"/>
<input type="reset" id="resetid" value="重置"/>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
页面效果：
只是测试了一部分功能，因篇幅有限，不能测试全面，有什么问题，欢迎留言一起学习！
里面的正则表达式，参考小编的前几篇文章，有资源连接的
上一篇： 勒内·笛卡儿是谁？勒内·笛卡儿生平简介