jqury表单验证
结合天天生鲜的用户注册页面，学习验证表单js
register.js--表单验证源码
$(function(){
var error_name = false;
var error_password = false;
var error_check_password = false;
var error_email = false;
var error_check = false; //是否同意页面上的那个协议选框
$('#user_name').blur(function() { //blur表示失去焦点时去执行check_user_name来验证用户名
check_user_name();
});
$('#pwd').blur(function() {
check_pwd();
});
$('#cpwd').blur(function() {
check_cpwd();
});
$('#email').blur(function() {
check_email();
});
//选定协议勾选框
$('#allow').click(function() {
if($(this).is(':checked')) //也可写成if($(this).prop('checked')
{
error_check = false;
$(this).siblings('span').hide(); //也可写成$('.error_tip2').hide()
}
else
{
error_check = true;
$(this).siblings('span').html('请勾选同意');
$(this).siblings('span').show();
}
});
function check_user_name(){
var len = $('#user_name').val().length; //val() 方法返回或设置被选元素的值，多用于input元素。
if(len<5||len>20)
{
$('#user_name').next().html('请输入5-20个字符的用户名')
$('#user_name').next().show(); //将上面的提示信息显示出来
error_name = true;
}
else
{
$('#user_name').next().hide(); //next()表示同级的下一个元素，也就是提示信息<span>标签
error_name = false;
}
}
function check_pwd(){
var len = $('#pwd').val().length;
if(len<8||len>20)
{
$('#pwd').next().html('密码最少8位，最长20位') //表示同级一下标签<span>中显示的文本
$('#pwd').next().show();
error_password = true; //为true说明密码错误
}
else
{
$('#pwd').next().hide();
error_password = false;
}
}
function check_cpwd(){
var pass = $('#pwd').val();
var cpass = $('#cpwd').val();
if(pass!=cpass)
{
$('#cpwd').next().html('两次输入的密码不一致')
$('#cpwd').next().show();
error_check_password = true;
}
else
{
$('#cpwd').next().hide();
error_check_password = false;
}
}
function check_email(){
//18515099823@qq.com
//以字母为数字开头，(\.[a-z]{2,5})表示邮箱中的.com型的字符,后面的{1，2}不知道啥用
var re = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
if(re.test($('#email').val())) //如果通过上面的re测试，if语句为真
{
$('#email').next().hide();
error_email = false;
}
else
{
$('#email').next().html('你输入的邮箱格式不正确')
$('#email').next().show();
error_check_password = true;
}
}
//注册按钮的提交
$('#reg_form').submit(function() {
check_user_name();
check_pwd();
check_cpwd();
check_email();
if(error_name == false && error_password == false && error_check_password == false && error_email == false && error_check == false)
{
return true; //返回true就可提交数据
}
else
{
return false; //返回false，阻止提交
}
});
})
register.html源码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>天天生鲜-注册</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/register.js"></script> //表单验证js
</head>
<body>
<div class="register_con">
<div class="l_con fl">
<a class="reg_logo"><img src="data:images/logo02.png"></a>
<div class="reg_slogan">足不出户 · 新鲜每一天</div>
<div class="reg_banner"></div>
</div> <div class="r_con fr">
<div class="reg_title clearfix">
<h1>用户注册</h1>
<a href="#">登录</a>
</div>
<div class="reg_form clearfix">
<form>
<ul>
<li>
<label>用户名:</label>
<input type="text" name="user_name" id="user_name">
<span class="error_tip">提示信息</span>
</li>
<li>
<label>密码:</label>
<input type="password" name="pwd" id="pwd">
<span class="error_tip">提示信息</span>
</li>
<li>
<label>确认密码:</label>
<input type="password" name="cpwd" id="cpwd">
<span class="error_tip">提示信息</span>
</li>
<li>
<label>邮箱:</label>
<input type="text" name="email" id="email">
<span class="error_tip">提示信息</span>
</li>
<li class="agreement">
<input type="checkbox" name="allow" id="allow" checked="checked">
<label>同意”天天生鲜用户使用协议“</label>
<span class="error_tip2">提示信息</span>
</li>
<li class="reg_sub">
<input type="submit" value="注 册" name="">
</li>
</ul>
</form>
</div> </div> </div> <div class="footer no-mp">
<div class="foot_link">
<a href="#">关于我们</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">招聘人才</a>
<span>|</span>
<a href="#">友情链接</a>
</div>
<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
<p>电话：010-****888 京ICP备*******8号</p>
</div> </body>
</html>
jqury表单验证的更多相关文章
- Jquery表单验证插件validate
写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...
- jQuery学习之路（8）- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- 玩转spring boot——AOP与表单验证
AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...
- form表单验证-Javascript
Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（33）-MVC 表单验证
系列目录 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可或缺的,微软的东西还是做得比较人性化的,从webform到MVC,都做到了双向验证 单单的用js实现的前端 ...
- 实现跨浏览器html5表单验证
div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
随机推荐
- 10 华电内部文档搜索系统 search03
上一节讲解了怎么在Struts 2下面使用内置对象传值,在Struts 2下面是用Session或者Request存放对象.在Struts 2下面是用内部对象传值,和JSP页面下面稍微有些不同.但是实 ...
- 蒟蒻LQL的博客
这里是蒟蒻LQL的博客!!! 一枚水的不能再水的弱校ACMer···· 可能会在这写一些题解或者别的什么乱七八糟的··· 可能大概没什么人看,就当错题本好了o(*￣▽￣*)ブ 因为太弱了难免有错误!发 ...
- Python实现目录文件的全量和增量备份
目标: 1.传入3个参数:源文件路径,目标文件路径,md5文件 2.每周一实现全量备份,其余时间增量备份 1.通过传入的路径,获取该路径下面的所有目录和文件(递归) 方法一:使用os.listdir ...
- 344. Reverse String 最基础的反转字符串
［抄题］: [暴力解法]: 时间分析: 空间分析: ［奇葩输出条件］: ［奇葩corner case］: ［思维问题］: 还停留在 i < len / 2的阶段,不行,应该是指针对撞问题了 ［一 ...
- linux系统软件版本升级
在安装完软件之后,在同一层目录生成一个符号链接,并把当前软件的目录映射到这个链接上,后面的操作都只通过这个链接去做,以后升级版本的时候,把最新的软件目录映射到这个链接上就可以了. 如我刚装的apach ...
- 882. Reachable Nodes In Subdivided Graph
题目链接 https://leetcode.com/contest/weekly-contest-96/problems/reachable-nodes-in-subdivided-graph/ 解题 ...
- 关于在64位win7下运行Virtualbox安装系统时出错（提示VBoxDD.DLL错误）的解决方
安装没有问题,安装了最新版VirtualBox-4.3.18-96516-Win,一点运行想安装系统时就出错. 这是提示的错误: 运行Virtualbox去安装系统时出错:Failed to open ...
- Ha-Federation-hdfs +Yarn集群部署方式
经过一下午的尝试,终于把这个集群的搭建好了,搭完感觉也没有太大的必要,就当是学习了吧,为之后搭建真实环境做基础. 以下搭建的是一个Ha-Federation-hdfs+Yarn的集群部署. 首先讲一下 ...
- Spring Boot☞ 统一异常处理
效果区: 代码区: package com.wls.integrateplugs.exception.dto; public class ErrorInfo<T> { public st ...
- sklearn中的随机森林
阅读了Python的sklearn包中随机森林的代码实现,做了一些笔记. sklearn中的随机森林是基于RandomForestClassifier类实现的,它的原型是 class RandomFo ...