分享一篇最近新写的jquery注册页面表单校验的程序，仅供参考
<!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>
页面效果：
只是测试了一部分功能，因篇幅有限，不能测试全面，有什么问题，欢迎留言一起学习！
里面的正则表达式，参考小编的前几篇文章，有资源连接的
分享一篇最近新写的jquery注册页面表单校验的程序，仅供参考的更多相关文章
- JQuery注册页面表单检验完善
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 分享分享JavaScript100例-仅供参考
最近一直在做项目,分享下以前收集的Javascript100例,仅供参考. http://files.cnblogs.com/52net/JavaScript100例.zip
- 使用JQuery.Validate插件来校验页面表单有效性
使用JQuery.Validate插件来校验页面表单有效性1. [代码] 常见的注册表单元素 <form action="#" method="post" ...
- Blazor WebAssembly 船新项目下载量测试 , 仅供参考.
前言: 昨天 Blazor WebAssembly 3.2 正式发布了. 更新 VS2019后就能直接使用. 新建了两个PWA项目, 一个不用asp.net core (静态部署), 一个使用as ...
- 淘宝网购物车jquery源码和网易新用户注册页面表单验证的练习
淘宝网购物车源码: <html lang="en"> <head> <meta charset="UTF-8"> <t ...
- jsp页面表单的遍历要怎么写
1.传统的方式使用request.getAttribute(“list”);获取表单的值, 2.也可以用struts2提供的标签进行遍历 备注 // 传统的接受参数方法 // String sfz=t ...
- jQuery学习(八)——使用JQ插件validation进行表单校验
1.官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 目录结构: 2.引入jquery库和validation插件 ...
- Jquery easyui 重置按钮，easyui 清空表单，Jquery easyui 重置表单
Jquery easyui 重置按钮,easyui 清空表单,Jquery easyui 重置表单 >>>>>>>>>>>>&g ...
- 手把手教你提交Jar包到Maven公共仓库 | 萌新写开源02
在上一篇文章中,我介绍了自己的SpringBoot Starter项目,可以让我们使用注解的方式轻松地获取操作日志,并推送到指定数据源. 之前,我的项目开源在Github上,大家想要用我的项目,还得把 ...
随机推荐
- maker使用说明书
1.以自带的示例数据为例 dpp_contig.fasta dpp_est.fasta dpp_protein.fasta te_proteins.fasta 2.生成控制文件 控制文件是特定于运行的 ...
- ESP8266 LUA脚本语言开发: 准备工作-官网获取LUA固件
前言 这节咱去官网上获取lua开发的固件. 官网下载 下面是我以前写的,咱不使用官网下载的固件,咱使用自己编译的固件.. 填写好自己的的邮箱地址,然后选择好自己需要的功能,一会编译好的固件就会发到您的 ...
- token的验证过程
1.用户向服务器发送用户名和密码. 2.服务端收到请求,验证用户名和密码. 3.验证成功后,服务端会签发一个token,并将这个token发送到客户端. 4.客户端收到token后将token存储起来 ...
- ZROI 暑期高端峰会 A班 Day4 生成函数
一般生成函数 很普及组,不讲了 生成函数是一种形式幂级数,也就是我们只关心系数,不关心未知数具体的值. 比如 \(\sum\limits_{i\ge 0}x^i=\frac{1}{1-x}\).虽然只 ...
- 使Jackson和Mybatis支持JSR310标准
1.首先要确保Jackson和Mybatis正确地整合进项目了 2.添加额外的依赖 <dependency> <groupId>org.mybatis</groupId& ...
- 紧随时代的步伐--Java8之Lambda表达式的使用
1.前言 在计算机行业,每天都会有新的技术诞生,每天都会有上百种的技术更新升级.追随时代的步伐,终生学习,才能不被社会的浪潮淘汰. 2.关于Lambda表达式 Lambda表达式是Java8新特性之一 ...
- 《Modern PHP》读书笔记
这本书适合你吗? 我认为每个有一定PHP开发经验的人都应该读读这本书,因为正如书中的前言所说: “网上有成千上万的PHP教程,其中大多数都已经过时了,展示的是陈旧的实践方式.可是,谷歌的搜索结 ...
- go 优秀文档
go语言资料汇总 : https://blog.zhnytech.com/articles/2016/07/15/Golang%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99% ...
- GitLab修改root用户密码
GitLab是一个私有的Git仓库,具有较好的项目管理和用户管理能力.对于普通用户而言,通过系统的重置密码,接受邮件即可解决,可是GitLab的管理员账号,缺省的邮箱是一个不存在的邮箱地址,所以没有办 ...
- ASP.NET Core使用Docker进行容器化托管和部署
一.课程介绍 人生苦短,我用.NET Core!今天给大家分享一下Asp.Net Core以Docker进行容器化部署托管,本课程并不是完完全全的零基础Docker入门教学,课程知识点难免有没覆盖全面 ...