使用 纯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 ...
随机推荐
- 第三届“百越杯”福建省高校网络空间安全大赛_Do you know upload？
题目在i春秋的ctf训练营 既然是上传,那就直接抓包 二话不说上来先给个00截断传个一句话助助兴 直接就成功了.... 赶紧操起菜刀去连接 进去之后发现ctf.sql是个空文件,那么flag应该在数据 ...
- 将python代码打印成pdf
将python代码打印成pdf,打印出来很丑,完全不能看. mac下:pycharm 编辑器有print的功能,但是会提示: Error: No print service found. 所以需要一个 ...
- Java IO（四）
在文件操作流中,输入输出的目标都是文件,但是有时候,我们并不需要写入文件,只是需要中转一下而已,这样就会显得很麻烦,所以我们就可以使用内存操作流.在内存操作流中,输入输出目标都是内存. 内存输出流:B ...
- 《C++ Primer》学习笔记：3.3.3其他vector操作
<C++ Primer>(第五版)中计算vector对象中的索引这一小节中,举例要求计算各个分数段各有多少个成绩. 代码如下: #include <iostream> #inc ...
- SAC E#1 - 一道中档题 Factorial
题目背景 SOL君(炉石主播)和SOL菌(完美信息教室讲师)是好朋友. 题目描述 SOL君很喜欢阶乘.而SOL菌很喜欢研究进制. 这一天,SOL君跟SOL菌炫技,随口算出了n的阶乘. SOL菌表示不服 ...
- 洛谷P1856 [USACO5.5]矩形周长Picture
题目背景 墙上贴着许多形状相同的海报.照片.它们的边都是水平和垂直的.每个矩形图片可能部分或全部的覆盖了其他图片.所有矩形合并后的边长称为周长. 题目描述 编写一个程序计算周长. 如图1所示7个矩形. ...
- P2P技术详解(二)：P2P中的NAT穿越(打洞)方案详解
1.内容概述 P2P即点对点通信,或称为对等联网,与传统的服务器客户端模式(如下图"P2P结构模型"所示)有着明显的区别,在即时通讯方案中应用广泛(比如IM应用中的实时音视频通信. ...
- Python 中的 if __name__ == '__main__' 该如何理解
__name__ 表示当前模块名, __main__ 表示正在运行的模块名. if __name__ == '__main__' 这句话的意思就是,当模块被直接运行时,以下代码块将被运行,当模块是被导 ...
- …… are only available on JDK 1.5 and higher 错误（spring 的jdk版本检测在jdk 8下的修订）
正常方法 用更高的版本,因为spring向下兼容. 我公司需求的方法(真 迟早跑路) 1.在项目中创建一个package为org.springframework.core 2.在该package下面新 ...
- 使用svn无法cleanup和lock问题
step1: 到 sqlite官网 (http://www.sqlite.org/download.html) 下载 sqlite3.exe 找到 Precompiled Binaries for W ...