jQuery之表单校验：新用户注册
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第10章新用户注册</title>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<link rel="stylesheet" href="css/register.css">
</style>
<script type="text/javascript">
$(function() { //验证通行证用户名的非空验证
function Passname() {
var pname = $("#userName").val();
if (pname == '') {
$("#userNameId").addClass('error_prompt');
$("#userNameId").html("验证通行证用户名不能为空");
return false;
}
//规定正则以数字字母开头
var reg = /^[a-zA-Z][a-zA-Z0-9_]*$/;
if (reg.test(pname) == false) {
$("#userNameId").addClass("error_prompt");
$("#userNameId").html("由字，数，下，点，减号组成...");
//$("#userName").val("");
return false;
} else if (reg.test(pname) == true) {
$("#userNameId").addClass('ok_prompt');
$("#userNameId").html("通行证用户名输入正确");
return true;
}
}
//通行证失去焦点的时候
var blurname = $("#userName");
blurname.blur(function() {
return Passname();
}); //验证登陆密码长度为6~16位
//密码是6-16位字母加数字
function Pwd11() {
var textpwd = $("#pwd").val();
if (textpwd =='') {
$("#pwdId").addClass("error_prompt");
$("#pwdId").html("密码是必填！");
return false;
}
var pwd11 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
if (pwd11.test(textpwd) == false) {
$("#pwdId").addClass("error_prompt");
$("#pwdId").html("密码是6-16位字母加数字");
return false;
}else if (pwd11.test(textpwd) == true) {
$("#pwdId").addClass("ok_prompt");
$("#pwdId").html("密码格式合格");
return true;
}
}
//密码失去焦点
var blurpwd = $("#pwd");
blurpwd.blur(function() {
return Pwd11();
}); //再次验证密码
function twopwd(){
var firstpwd = $("#pwd").val();//第一次输入的密码
var tpwd = $("#repwd").val();//第二次输入的密码的时候。
if (firstpwd != tpwd) {
$("#repwdId").addClass("error_prompt");
$("#repwdId").html("两次输入的密码不一致！");
return false;
}else{
//$("repwdId").html("");
return true;
}
}
//重复密码失去焦点
var blurtwopwd = $("#repwd");
blurtwopwd.blur(function() {
return twopwd();
}); /* //真实姓名
function truename(){
var regname = $("#realName").val();
//汉字
var regn = /^[\u4e00-\u9fa5]{2,4}$/;
if (regn.test(regname) == false) {
$("#pwdId").addClass("ok_prompt");
$("#pwdId").html("密码格式合格");
return true;
}
} */ //昵称
function nickname(){
var kname = $("#nickName").val();
var len = kname.replace(/[\u4e00-\u9fa5]/g,"xx").length;
if (len == 0) { $("#nickNameId").addClass("error_prompt");
$("#nickNameId").html("昵称的输入的格式不正确！");
return false;
}else{
$("#nickNameId").addClass("ok_prompt");
$("#nickNameId").html("昵称的输入的格式正确！");
return true;
}
}
//昵称失去焦点
var e = $("#nickName");
e.blur(function(){
return nickname();
}); //验证以1开头的11位手机号码
function number(){
var num = $("#tel").val();
var regnum = /^1([1-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/;
if (regnum.test(num) == false) {
$("#telId").addClass("error_prompt");
$("#telId").html("请以1开头的11位手机号码");
return false;
}else if (regnum.test(num) == true) {
$("#telId").addClass("ok_prompt");
$("#telId").html("关联手机号正确！");
return true;
}
}
//失去焦点的时候
var num1 = $("#tel");
num1.blur(function(){
return number();
}); //邮箱
function emails(){
var ema = $("#email").val();
if (ema == '') {
$("#emailId").addClass("import_prompt");
$("#emailId").html("跟你说了多少遍了别空格");
}
}
var emalss = $("#email");
emalss.blur(function(){
return emails();
});
//form.submit提交的按钮
$("#registerForm").submit(function() {
return Passname()&&Pwd11()&&twopwd()&&nickname()&&number()&&emails();
}); //键盘点击事件
$(document).keydown(function(event) {
if (event.keyCode == "13") {//按下回车键
return Passname()&&Pwd11()&&twopwd()&&nickname()&&number()&&emails();
}
});
});
</script>
</head>
<body>
<div id="header">
<img src="data:images/register_logo.gif" alt="logo" />
</div>
<div id="main">
<form id="registerForm" action="myCart.html" 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="realName" class="inputs" />
</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="data:images/button.gif" />
</dd>
</dl>
</form>
</div> </body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第10章新用户注册</title>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<link rel="stylesheet" href="css/register.css">
</style>
<script type="text/javascript">
$(function() { //验证通行证用户名的非空验证
function Passname() {
var pname = $("#userName").val();
if (pname == '') {
$("#userNameId").addClass('error_prompt');
$("#userNameId").html("验证通行证用户名不能为空");
return false;
}
//规定正则以数字字母开头
var reg = /^[a-zA-Z][a-zA-Z0-9_]*$/;
if (reg.test(pname) == false) {
$("#userNameId").addClass("error_prompt");
$("#userNameId").html("由字，数，下，点，减号组成...");
//$("#userName").val("");
return false;
} else if (reg.test(pname) == true) {
$("#userNameId").addClass('ok_prompt');
$("#userNameId").html("通行证用户名输入正确");
return true;
}
}
//通行证失去焦点的时候
var blurname = $("#userName");
blurname.blur(function() {
return Passname();
}); //验证登陆密码长度为6~16位
//密码是6-16位字母加数字
function Pwd11() {
var textpwd = $("#pwd").val();
if (textpwd =='') {
$("#pwdId").addClass("error_prompt");
$("#pwdId").html("密码是必填！");
return false;
}
var pwd11 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
if (pwd11.test(textpwd) == false) {
$("#pwdId").addClass("error_prompt");
$("#pwdId").html("密码是6-16位字母加数字");
return false;
}else if (pwd11.test(textpwd) == true) {
$("#pwdId").addClass("ok_prompt");
$("#pwdId").html("密码格式合格");
return true;
}
}
//密码失去焦点
var blurpwd = $("#pwd");
blurpwd.blur(function() {
return Pwd11();
}); //再次验证密码
function twopwd(){
var firstpwd = $("#pwd").val();//第一次输入的密码
var tpwd = $("#repwd").val();//第二次输入的密码的时候。
if (firstpwd != tpwd) {
$("#repwdId").addClass("error_prompt");
$("#repwdId").html("两次输入的密码不一致！");
return false;
}else{
//$("repwdId").html("");
return true;
}
}
//重复密码失去焦点
var blurtwopwd = $("#repwd");
blurtwopwd.blur(function() {
return twopwd();
}); /* //真实姓名
function truename(){
var regname = $("#realName").val();
//汉字
var regn = /^[\u4e00-\u9fa5]{2,4}$/;
if (regn.test(regname) == false) {
$("#pwdId").addClass("ok_prompt");
$("#pwdId").html("密码格式合格");
return true;
}
} */ //昵称
function nickname(){
var kname = $("#nickName").val();
var len = kname.replace(/[\u4e00-\u9fa5]/g,"xx").length;
if (len == 0) { $("#nickNameId").addClass("error_prompt");
$("#nickNameId").html("昵称的输入的格式不正确！");
return false;
}else{
$("#nickNameId").addClass("ok_prompt");
$("#nickNameId").html("昵称的输入的格式正确！");
return true;
}
}
//昵称失去焦点
var e = $("#nickName");
e.blur(function(){
return nickname();
}); //验证以1开头的11位手机号码
function number(){
var num = $("#tel").val();
var regnum = /^1([1-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/;
if (regnum.test(num) == false) {
$("#telId").addClass("error_prompt");
$("#telId").html("请以1开头的11位手机号码");
return false;
}else if (regnum.test(num) == true) {
$("#telId").addClass("ok_prompt");
$("#telId").html("关联手机号正确！");
return true;
}
}
//失去焦点的时候
var num1 = $("#tel");
num1.blur(function(){
return number();
}); //邮箱
function emails(){
var ema = $("#email").val();
if (ema == '') {
$("#emailId").addClass("import_prompt");
$("#emailId").html("跟你说了多少遍了别空格");
}
}
var emalss = $("#email");
emalss.blur(function(){
return emails();
});
//form.submit提交的按钮
$("#registerForm").submit(function() {
return Passname()&&Pwd11()&&twopwd()&&nickname()&&number()&&emails();
}); //键盘点击事件
$(document).keydown(function(event) {
if (event.keyCode == "13") {//按下回车键
return Passname()&&Pwd11()&&twopwd()&&nickname()&&number()&&emails();
}
});
});
</script>
</head>
<body>
<div id="header">
<img src="data:images/register_logo.gif" alt="logo" />
</div>
<div id="main">
<form id="registerForm" action="myCart.html" 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="realName" class="inputs" />
</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="data:images/button.gif" />
</dd>
</dl>
</form>
</div> </body>
</html>
CSS的样式：
* {padding:;margin:;}
#header,#main{
width:600px;
margin:0 auto;
}
#main{
padding: 10px;
border: 1px #999999 solid;
border-radius: 8px;
overflow: hidden;
}
.inputs{
border:solid 1px #a4c8e0;
width:150px;
height:15px;
}
.userWidth{
width:110px;
}
dl dd div{
display: inline-block;
font-size:12px;
color:#000;
margin-left: 5px;
line-height: 18px;
}
dl{
clear:both;
line-height: 22px;
}
dt,dd{
float:left;
}
dt{
width:110px;
text-align:right;
font-size:14px;
height:30px;
line-height:25px;
}
dd{
font-size:12px;
color:#666666;
}
dl>dd:first-of-type{width: 170px;}
.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;
}
希望能够帮到大家。
jQuery之表单校验：新用户注册的更多相关文章
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- jQuery.validate表单校验+bootstrap
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- jQuery Validate表单校验
jQuery plugin: Validation 使用说明 学习链接及下载地址:http://www.runoob.com/jquery/jquery-plugin-validate.html 一导 ...
- 基于jquery的表单校验插件 - rjboy的Validform使用体验
官方地址:http://validform.rjboy.cn/document.html 引用js后再加上以下css就可以使用了 .Validform_checktip{ margin-left:8p ...
- 基于jquery的表单校验插件 - formvalidator使用体验
下载地址:http://www.formvalidator.net/ 基本样例 <form action="/registration" method="POST& ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- 简单好用的表单校验插件——jQuery Validate基本使用方法总结
jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/t ...
- 关于jQuery表单校验
<style> .red{border: 1px solid red;} .wrong-tip{color: red;} </style> <form action=&q ...
- 【JAVAWEB学习笔记】28_jqueryAjax：json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(J ...
随机推荐
- kubernetes系列(十七) - 通过helm安装dashboard详细教程
1. 前提条件 2. 配置https证书为secret 3. dashboard安装 3.1 helm拉取dashboard的chart 3.2 配置dashboard的chart包配置 3.3 he ...
- P2070 刷墙 （洛谷）
题目描述 Farmer John已经设计了一种方法来装饰谷仓旁边的长栅栏(把栅栏认为是一根一维的线).他把一只画刷绑在他最喜爱的奶牛Bessie身上,之后就去喝一杯冰水,而Bessie隔着栅栏来回走, ...
- 设计模式：fly weight模式
目的:通过共享实例的方式来避免重复的对象被new出来,节约系统资源 别名:享元模式 例子: class Char //共享的类,轻量级 { char c; public: Char(char c) { ...
- 微信PC端多开的秘密
微信电脑端也能多开 昨天,偶然从好朋友小林(微信公众号:小林Coding)处得知,他的电脑居然可以同时上两个微信号. 手机端多开微信我知道,像华为.小米等手机系统都对此做了支持,不过在运行Window ...
- vue学习(十八)使用自定义指令 为字体渲染颜色
<div id="app"> //v-color 是自定义的 <input type="text" class="form-cont ...
- numpy巩固
导包 import numpy as np 创建二维数组 x = np.matrix([[1,2,3],[4,5,6]]) 创建一维数组 y = np.matrix([1,2,3,4,5,6]) x ...
- PHP count_chars() 函数
实例 返回一个字符串,包含所有在 "Hello World!" 中使用过的不同字符(模式 3): <?php高佣联盟 www.cgewang.com$str = " ...
- bzoj 3782 上学路线 卢卡斯定理 容斥 中国剩余定理 dp
LINK:上学路线 从(0,0)走到(n,m)每次只能向上或者向右走 有K个点不能走求方案数,对P取模. \(1\leq N,M\leq 10^10 0\leq T\leq 200\) p=10000 ...
- Nginx使用中遇到的问题记录
问题一.关于空格 nginx配置对空格十分敏感,在关键字和符号的前后,一定记得有空格(或换行).一个典型的场景是 if { } 语句,大括号前后要有空格,否则可能出现非预期行为. 问题二.关于serv ...
- Linux下运行windows 系统下编辑的Python脚本显示“: 没有那个文件或目录”的过程及解决方案
今天在 linux 系统下执行一windows下编辑的python脚本,提示(:没有那个文件或目录)英文提示:(:No such file of directory)如下: 查看文件的权限发现并没有问 ...