表单验证jQuery

最新推荐文章于 2022-03-24 13:45:10 发布
最新推荐文章于 2022-03-24 13:45:10 发布
阅读量155 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanglinuo521/article/details/78984559
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/jquery-1.11.0.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="450px">
<tr>
<td>用户名：</td>
<td><input type="text" id="userName"><br>
<span id="name_err"></span>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id="userEmail"><br>
<span id="email_err"></span>
</td>
</tr>
<tr>
<td>电话：</td>
<td><input type="text" id="userTel"><br>
<span id="tel_err"></span>
</td>
</tr>
<tr>
<td>身份证号码：</td>
<td><input type="text" id="userID"><br>
<span id="id_err"></span>
</td>
</tr>
</table>
<button id="submite">提交</button>
</body>
<script>
var flagEmail=false
var flagName=false
var flagTel=false
var flagID=false
//验证用户名长度不能小于3个字符
$("#userName").blur(function(){
if($(this).val().length<3){
$("#name_err").html("姓名字符不能小于3位")
flagName=false
}else{
$("#name_err").html("√")
flagName=true
}
})
//判断邮箱地址必须包含@
$("#userEmail").blur(function(){
var aa=$(this).val().indexOf("@")
if(aa==-1){
$("#email_err").html("邮箱地址必须包含@")
flagEmail=false
}else{
$("#email_err").html("√")
flagEmail=true
}
})
//判断电话号码长度必须等于11位
$("#userTel").blur(function(){
// re = /^1\d{10}$/
if($(this).val().length!=11){
$("#tel_err").html("电话号码必须是11位数字")
flagTel=false
}else{
$("#tel_err").html("√")
flagTel=true
}
})
//验证身份证号长度必须等于18位
$("#userID").blur(function(){
if($(this).val().length!=18){
$("#id_err").html("身份证号码长度必须是18位")
flagID=false
}else{
$("#id_err").html("√")
flagID=true
}
})
//验证全对则跳转提交否则提示错误
$("#submite").click(function(){
if(flagEmail&&flagName&&flagID&&flagTel){
window.location="new_file.html"
}else{
alert("用户信息填写错误")
}
})
</script>

/[_a-z\d\-\./]+@[_a-z\d\-]+(\.[_a-z\d\-]+)*(\.(info|biz|com|edu|gov|net|am|bz|cn|cx|hk|jp|tw|vc|vn))$/

</html>
wanglinuo521
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery-表单验证
lu__lala的博客
10-28 407
表单选择器 语法 描述 返回值 :input 匹配所有input，textarea，select和button元素 元素集合 :text 匹配所有的单行文本框 元素集合 :password 匹配所有密码框 元素集合 :radio 匹配所有单选按钮 元素集合 :checkbox 匹配所有复选框 元素集合 :submit 匹配所有提交按钮 元素集合 :reset 匹配许所有重置按钮 元素
jQuery之表单验证
ouersl的博客
01-12 143
前端样式 <legend>表单校验</legend> 姓名: <input type="text" name="unae" value="" id="unae"> <span class="msg" id="user_msg">*</span> <img src="#" alt=""> <br/> 密码: <...
JQuery 简单表单验证
爪白白的个人博客
05-20 1382
选择器 $("p") 选取<p>元素 $("p.intro") 选取class="intro" 的<p>元素 $("p#demo") 选取id="demo" 的<p>元素 $("div input") 选取div 下所有的input元素 $("p:first") 选取第一个段落 $("p:last") 选取最后一个段落 $("tr:even") 选择...
JQuery-表单验证
qq_49246775的博客
12-07 6373
GiWiFI页面验证登录()表单验证
jQuery实现表单验证
热门推荐
生有涯，知无涯
04-24 4万+
1.基于html表单，利用jQuery实现表单验证功能。 2.html基本结构和样式： 3.html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="h...
jQuery实例之表单验证
二木成林
05-14 2279
使用jQuery实现表单验证： register.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> <!--导入jQuery--> <script src="js/jquery-3.3.1.js"></script> <!--进行
JQuery实现表单验证
你好啊cbw
03-06 579
使用属性选择器来选中具体元素 使用val()/html()给元素添加内容 给每个表单项绑定离焦事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单验证</title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> &lt
表单验证jquery
11-15
jQuery是一个流行的JavaScript库，它简化了DOM操作，使得实现表单验证变得更加简单。本文将深入探讨如何利用jQuery进行基本的非空验证，并提供一个模板参考。 首先，让我们了解jQuery的基本用法。jQuery的核心在于...
表单验证jquery插件
12-24
jQuery Validation Engine 是一个功能强大的表单验证插件，以其简单易用和丰富的自定义选项而受到开发者的青睐。 ## 1. jQuery Validation Engine 插件简介 jQuery Validation Engine 是一款基于 jQuery 库的验证...
通用表单验证Jquery插件.rar
07-05
通用表单验证Jquery插件是为了提高用户体验和数据安全而设计的。Jquery是一种强大的JavaScript库，它简化了JavaScript的DOM操作，事件处理，动画效果，以及Ajax交互。在这个场景中，我们关注的是Jquery在表单验证中...
jQuery表单验证（各表单后面提示）
02-17
jQuery表单验证，我们常见的互联网注册时即时弹出提示情况，非常有用
最新实用的Validate通用表单验证Jquery插件
09-22
【最新实用的Validate通用表单验证Jquery插件】是一个高效、灵活的前端验证工具，专为使用Jquery框架的Web开发人员设计。这个插件极大地简化了表单验证的过程，使得用户输入的数据在提交前就能得到有效的检查，从而...
表单验证JQuery
08-21
"EasyValidator2表单验证JQuery插件"就是这样一个工具，它专为jQuery设计，简化了前端数据验证的过程，提供了丰富的验证规则和友好的用户体验。 EasyValidator2是基于jQuery的一个轻量级插件，它的核心功能在于为...
Jquery表单验证
ylh__990925的博客
04-15 105
Jquery表单验证 html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="jquery-3.4.1.min.js"></script> <link rel="stylesheet" type="text/css" href="font-awesome-4.7
jQuery-05
weixin_65088316的博客
03-24 716
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery库 --> <style type="text/css"> #myForm label.error{ color:red; ...
jQuery实现表单的验证
wq857260622的博客
11-12 4847
要求：技术要求（html+css+jquery） 1.  完成页面布局（页面布局合理、样式和图片一致、代码无误各） 2. 用jquery验证Email地址是否有效，要求Email地址中必须包含@符号，如果Email地址有效则显示”正确”的图标，并在图标后面提示用户可用，否则在Email注册框后面显示”错误”的图标，图标后面提示用户Email错误。 3. 在设置昵称框中要求用户输入的昵称必须大
jQuery轻松进行表单验证
代码教主
06-21 489
在本教程中，您将学习如何使用jQuery插件向您的网站添加表单验证。 使用jQuery插件来验证表单有很多目的。 它为您提供了其他功能，例如轻松显示自定义错误消息以及添加条件逻辑以进行表单验证。 验证库还可以帮助您将验证添加到HTML表单中，而对标记的更改很少或没有更改。 有效性条件也可以随时轻松添加，删除或修改。 入门 在本教程中，我们将使用jQuery Validation插件 。...
JQuery实现注册表单校验
伦哥哥
04-23 9538
本篇文章主要包含的知识点： 事件函数 triggerHandler与trigger函数的区别 表单提交的事件submit（）方法，如果返回是false则阻止submit提交 在元素后添加内容，需要先获取这个元素的父元素然后通过append方法添加元素。 通过JQ的is方法来比对是哪个对象（通常比对字符串采用选择器的字符串） 一、步骤分析： 1.需要准备HTML文件，里面包含表单元素的内...
怎么制作表单验证Jquery
最新发布
05-27
要制作表单验证Jquery，可以按照以下步骤进行： 1. 引入Jquery库文件和表单验证插件文件。 2. 编写HTML表单代码，给需要验证的表单元素添加相应的属性，如required、pattern等。 3. 编写Jquery代码，在文档加载...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值