使用 纯JQuery 进行 表单 验证
对于JavaScript而言，进行表单数据的验证可谓是很有必要的，而且一般我们都会在网页上先进行一下表单验证，然后服务器端再次进行验证，来确保用户提交数据的准确性。下面就来分享一个JQuery实现的表单验证。
本文的大纲为：
制作表单
- 要想实现表单验证，前提是得有个表单了。
<form method="post" action="">
<fieldset>
<legend>表单详情</legend>
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">邮 箱：</label>
<input type="email" id="email" class="required">
</div>
<div class="int">
<label for="persininfo">个人资料</label>
<textarea type="text" id="personinfo" ></textarea>
</div>
<div class="sub">
<input type="submit" value="提交" id="send">
<input type="reset" id="res">
</div>
</fieldset>
</form>得到的界面如下：
小红点？
想必眼睛雪亮的你一经发现了后面的小红点，这就是我们定义了
input标签里面required类属性值的原因，这样可以显得我们的表单更加的人性化，更加的美观。
使用到的JQuery代码如下：
// 首先添加非空验证小红点
$("form :input.required").each(function(){
var $required = $("<strong class='high'>*</strong>");
$(this).parent().append($required);
});正式的表单验证
- 使用markdown的流程图进行演示吧，思路如下
- 使用JQuery也是比较简单的，只要是思路有了，剩下的就是些语法问题。
// 下面添加每个元素的特定的验证规则
$("form :input").blur(function(){
var $parent = $(this).parent();
// 验证用户名
if($(this).is("#username")){
if(this.value=="" || this.value.length<6){
var errmsg = "请至少输入6位的用户名！";
$parent.append("<span class='error'>"+errmsg+"</span>");
}else{
var rightmsg = "输入数据正确!";
$parent.append("<span>"+rightmsg+"</span>");
}
}
// 验证邮箱
if($(this).is("#email")){
if(this.value==""|| (this.value!=""&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
var errmsg = "请输入正确的邮箱格式！";
$parent.append("<span class='error'>"+errmsg+"</span>");
}else{
var rightmsg = "输入正确！";
// $parent.append("<span>"+rightmsg+"</span>");
$parent.append("<span>"+rightmsg+"</span>");
}
}
});- 界面效果
优化效果
现在出错提示已经有了，但是如果我们修正了input标签里面的数据，错误提示仍然会存在，所以我们需要在其失去鼠标焦点的时候将出错的提示语句删掉。所以我们需要为form :input.required标签们添加一个blur事件。
// 失去焦点之后删除之前的数据提示
$("form :input.required").blur(function(){
var $parent = $(this).parent();
// $parent.find(".error").remove();
if($(this).is("#username")){
if(this.value=="" || this.value.length<6){
// var errmsg = "请至少输入6位的用户名！";
// $parent.append("<span class='error'>"+errmsg+"</span>");
}else{
$parent.find(".error").remove();
}
}
// 验证邮箱
if($(this).is("#email")){
if(this.value==""|| (this.value!=""&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
// var errmsg = "请输入正确的邮箱格式！";
// $parent.append("<span class='error'>"+errmsg+"</span>");
}else{
$parent.find(".error").remove();
}
}
})实现的效果如下：
完整的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单的选项验证</title>
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
<style>
.int {
width: 200px;
padding: 12px;
background-color: silver;
}
.container {
width: 240px;
align-content: center;
display: block;
}
.high {
color: red;
}
</style>
</head>
<body>
<div align="center" class="container">
<form method="post" action="">
<fieldset>
<legend>表单详情</legend>
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email">邮 箱：</label>
<input type="email" id="email" class="required">
</div>
<div class="int">
<label for="persininfo">个人资料</label>
<textarea type="text" id="personinfo" ></textarea>
</div>
<div class="sub">
<input type="submit" value="提交" id="send">
<input type="reset" id="res">
</div>
</fieldset>
</form>
</div>
<script>
// 首先添加非空验证小红点
$("form :input.required").each(function(){
var $required = $("<strong class='high'>*</strong>");
$(this).parent().append($required);
});
// 下面添加每个元素的特定的验证规则
$("form :input").blur(function(){
var $parent = $(this).parent();
// 验证用户名
if($(this).is("#username")){
if(this.value=="" || this.value.length<6){
var errmsg = "请至少输入6位的用户名！";
$parent.append("<span class='error'>"+errmsg+"</span>");
}else{
var rightmsg = "输入数据正确!";
$parent.append("<span>"+rightmsg+"</span>");
}
}
// 验证邮箱
if($(this).is("#email")){
if(this.value==""|| (this.value!=""&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
var errmsg = "请输入正确的邮箱格式！";
$parent.append("<span class='error'>"+errmsg+"</span>");
}else{
var rightmsg = "输入正确！";
// $parent.append("<span>"+rightmsg+"</span>");
$parent.append("<span>"+rightmsg+"</span>");
}
}
});
// 失去焦点之后删除之前的数据提示
$("form :input.required").blur(function(){
var $parent = $(this).parent();
// $parent.find(".error").remove();
if($(this).is("#username")){
if(this.value=="" || this.value.length<6){
// var errmsg = "请至少输入6位的用户名！";
// $parent.append("<span class='error'>"+errmsg+"</span>");
}else{
$parent.find(".error").remove();
}
}
// 验证邮箱
if($(this).is("#email")){
if(this.value==""|| (this.value!=""&& !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
// var errmsg = "请输入正确的邮箱格式！";
// $parent.append("<span class='error'>"+errmsg+"</span>");
}else{
$parent.find(".error").remove();
}
}
})
</script>
</body>
</html>在实际的开发中，表单验证是非常的实用的，希望这段文字能帮到需要帮助的人。
使用 纯JQuery 进行 表单 验证的更多相关文章
- 纯CSS实现表单验证
ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- jQuery formValidator表单验证插件
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- 【锋利的jQuery】表单验证插件踩坑
和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...
- jquery实现表单验证简单实例
/* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...
- jQuery的表单验证
jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- Jquery 实现表单验证，所有验证通过方可提交
1. [代码]Jquery 实现表单验证,所有验证通过方可提交 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...
随机推荐
- Event 发布与订阅(一)
前言 主要讲的是发布与订阅在Event中的一个简单实现用来加深理解. C #中的事件(Event)的理解: 事件具有以下属性:(From Events) 发行者确定何时引发事件:订户确定对事件作出何种 ...
- [BZOJ]4199: [Noi2015]品酒大会（后缀数组+笛卡尔树）
Time Limit: 10 Sec Memory Limit: 512 MB Description Input Output Sample Input 10 ponoiiipoi 2 1 4 7 ...
- HDU 6107 Typesetting
Problem Description Yellowstar is writing an article that contains N words and 1 picture, and the i- ...
- hdu 1133 Buy the Ticket（Catalan）
Buy the Ticket Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) T ...
- Centos下出现read-only file system 的解决办法
Centos下出现这种情况说明磁盘只能读不能写,出现这种情况一般是因为不正常的关机或者硬盘损坏导致磁盘挂载出现问题. 本萌新也遇到了这个问题,尝试了各种命令都不行,最后用了mount -o remou ...
- Linux学习之CentOS(十九)------linux 下压缩与解压之 tar、gzip、bzip2、zip、rar
将文件存储到归档文件中或者从归档文件中获取原始文件,以及为文件创建归档文件 tar [option] [modifiers] [file-list] 参数 file-list是tar进行归档和提取的文 ...
- Spring中<context:annotation-config/>
最近在研究Spring中<context:annotation-config/>配置的作用,现记录如下: <context:annotation-config/>的作用是向Sp ...
- angularjs中关于跨域设置白名单
在config中注入$sceDelegateProvider服务使用resourceUrlWhitelist([])方法添加白名单 跨域时将method的属性设置为"jsonp"就 ...
- RedHatEnterpriseLinuxServerRelease7.3上配置vsftp服务器
1.vsftpd 服务启停相关命令 systemctl start vsftpd systemctl stop vsftpd systemctl restart vsftpd 2.配置文件/etc/v ...
- Java中的内存分配
Java程序在运行时,需要在内存中分配空间,为了提高效率,就对空间进行了不同区域的划分,因为每一片区域否有特定的处理数据方式和内存管理方式. 1.栈存储局部变量 2.堆存储new出来的东西 3.方法区 ...