jQuery的表单验证
jQuery的表单验证
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post" action="">
<div class="int">
<label for="username">用户名:</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">邮箱:</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo">个人资料:</label>
<input type="text" id="personinfo" />
</div>
<div class="sub">
<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
</div>
</form>
<!-- 引入jQuery -->
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
//如果是必填的,则加红星标识.
$("form :input.required").each(function(){
var $required = $("<strong class='high'> *</strong>"); //创建元素
$(this).parent().append($required); //然后将它追加到文档中
});
//文本框失去焦点后
$('form :input').blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证用户名
if( $(this).is('#username') ){
if( this.value=="" || this.value.length < 6 ){
var errorMsg = '请输入至少6位的用户名.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
//验证邮件
if( $(this).is('#email') ){
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
var errorMsg = '请输入正确的E-Mail地址.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
});
//提交,最终验证。
$('#send').click(function(){
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false;
}
alert("注册成功,密码已发到你的邮箱,请查收.");
});
//重置
$('#res').click(function(){
$(".formtips").remove();
});
});
</script>
</body>
</html>
转载于:https://www.cnblogs.com/big2cat/p/9849510.html
jQuery的表单验证相关推荐
- 整理的16个有用的jQuery Form(表单)验证教程
表单在每个网站开发者必不可少的组成部份,而最烦繁的也是表单验证部份,借助于jQuery一些现有成熟的插件,可以大大减少我们的开发工作量以及减少很多重复出现的问题 ,这篇文章将整理出非常好的16篇非常有 ...
- 基于jQuery的表单验证插件:jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
- Jquery ValidateEngine表单验证
Jquery ValidateEngine表单验证 用法:http://www.position-relative.net/creation/formValidator/demoValidators. ...
- html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
- JQuery实现表单验证(注册页面)
注册页面功能实现: 验证会员名密码不能为空或者包含空格,并且保证长度至少6位 验证邮箱符合规则,并且不能为空 重复密码要与密码一致 1.页面的样式 <form action="#&qu ...
- jQuery实现表单验证
1.基于html表单,利用jQuery实现表单验证功能. 2.html基本结构和样式: 3.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- JQuery.validationEngine表单验证插件
一.说明 JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字 ...
- 基于 猫冬的 jQuery formValidator表单验证 的asp.net 控件
为了方便在asp.net中使用,封装了一下 <猫冬 的 jQuery formValidator表单验证> 控件 其实也不是什么控件,只是一个类,方便生成前台js. 特点: 1.后台生成的 ...
- jquery 实现表单验证功能代码(简洁)
html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title&g ...
最新文章
- 【创新应用】未来10年,这些黑科技必将颠覆我们的生活
- IPv6 — Multi-homing(多宿主/多链路/多归属)
- PHP中substr截取中文乱码解决方案
- 新建centos6虚拟机黑屏_虚拟机centos无法进去选择系统界面,也就是开机过bios就黑屏解决方案...
- vim-快捷键一览表
- AUTOSAR专业知识篇(五)-“敏捷”适用于汽车软件开发吗?当我们谈“敏捷”,到底在谈什么?
- c++远征之多态篇——虚函数及其实现原理
- 通讯接口应用笔记2:MAX3160实现多协议通讯
- spark源码分析之Executor启动与任务提交篇
- 关于在vSphere环境中,安装WindowsServer2008_R2_x64系统,分区格式为GPT,隐藏分区为200M方法心得
- Java讲课笔记02:Java集成开发环境
- api文档数据量太大崩溃_Tableau的API操作(一)-取消任务刷新
- 详解tf.nn.bias_add和tf.add、tf.add_n的区别
- C语言实现贪吃蛇小游戏
- Java编程中常见异常有哪些?
- 查找主机信息的两个协议:DHCP协议+NBNS协议
- 如何让那些模糊的照片变得高清?不会PS也能解决
- flink Flink在监控流计算中的应用
- Unity经典案例再现《太空大战》
- 你在工作中遇到过印象深刻的困难是什么,你怎么克服的?