jquery 表单验证

最新推荐文章于 2024-07-12 09:36:48 发布
最新推荐文章于 2024-07-12 09:36:48 发布
阅读量114 收藏
点赞数
分类专栏： jquery 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanglu271991027/article/details/84218130
版权
1.jquery 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Untitled Document</title> 
<link type="text/css" rel="stylesheet" href="new_file.css"/> 
<script language="JavaScript" src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script language="JavaScript" src="jquery-extend-1.0.0.js" type="text/javascript"></script> 
<script language="JavaScript" type="text/javascript"> 
$(document).ready(function(){ 
$("#txtName").checkRange({ 
onFocusText:"必填项", 
onFocusClass:"notice", 
targetId:"txtNameTip", 
onSuccessText:"验证成功", 
onSuccessClass:"correct", 
onErrorText:"你真不听话，请认真填写", 
onErrorClass:"error", 
min:6, 
max:12, 
dataType:"text" 
}); 
$("#rdbMan,#rdbWoman").checkRange({ 
onFocusText:"必填项", 
onFocusClass:"notice", 
targetId:"txtSexTip" 
}); 
$("#txtPass2").checkRange({ 
onFocusText:"必填项", 
onFocusClass:"notice", 
targetId:"txtPass2Tip", 
onSuccessText:"验证成功", 
onSuccessClass:"correct", 
onErrorText:"你真不听话，请认真填写", 
onErrorClass:"error", 
min:10, 
max:60, 
dataType:"text" 
}); 
$("#rdbMan1,#rdbWoman2,,#rdbMan3,,#rdbWoman4").checkRange({ 
onFocusText:"必填项", 
onFocusClass:"notice", 
targetId:"txthobbyTip", 
onSuccessText:"验证成功", 
onSuccessClass:"correct", 
onErrorText:"你真不听话，请认真填写", 
onErrorClass:"error", 
min:1, 
max:3, 
dataType:"text" 
}); 
$("#txtAge").checkRange({ 
onFocusText:"必填项", 
onFocusClass:"notice", 
targetId:"txtAgeTip", 
onSuccessText:"验证成功", 
onSuccessClass:"correct", 
onErrorText:"输入的范围为10-60", 
onErrorClass:"error", 
min:10, 
max:60, 
dataType:"number" 
}); 
$("#ddlOption").checkRange({ 
onFocusText:"必填项", 
onFocusClass:"notice", 
targetId:"ddlOptionTip", 
onSuccessText:"验证成功", 
onSuccessClass:"correct", 
onErrorText:"你真不听话，请认真填写", 
onErrorClass:"error", 
min:1, 
max:2, 
dataType:"number" 
}); 
$("#rdbMan,#rdbWoman").checkRange({ 
onFocusText:"必填项", 
onFocusClass:"notice", 
targetId:"txtSexTip", 
onSuccessText:"验证成功", 
onSuccessClass:"correct", 
onErrorText:"你真不听话，请认真填写", 
onErrorClass:"error", 
min:1, 
max:2, 
dataType:"number" 
}); 
}); 
</script> 
</head> 
<body> 
<p> 
<label>姓名:</label><input type="text" id="txtName" value=""/><span id="txtNameTip"></span> 
</p> 
<p> 
<label>年龄:</label><input type="text" id="txtAge" value=""/><span id="txtAgeTip"></span> 
</p> 
<p> 
<label>描述:</label><textarea id="txtArea"></textarea><span id="txtAreaTip"></span> 
</p> 
<p> 
<label>密码1:</label><textarea id="txtPass1"></textarea><span id="txtPass1Tip"></span> 
</p> 
<p> 
<label>密码2:</label><textarea id="txtPass2"></textarea><span id="txtPass2Tip"></span> 
</p> 
<p> 
<label>性别:</label> 
<span> 
<input id="rdbMan" type="radio" name="sex" value="男" />男 
<input id="rdbWoman" type="radio" name="sex" value="女" />女 
</span> 
<span id="txtSexTip"></span> 
</p> 
<p> 
<label>爱好:</label> 
<span> 
<input id="rdbMan1" type="checkbox" name="hobby" value="hobby1" />aa 
<input id="rdbWoman2" type="checkbox" name="hobby" value="hobby2" />bb 
<input id="rdbMan3" type="checkbox" name="hobby" value="hobby3" />aa 
<input id="rdbWoman4" type="checkbox" name="hobby" value="hobby4" />bb 
</span> 
<span id="txthobbyTip"></span> 
</p> 
<p> 
<label>地区:</label> 
<span> 
<select id="ddlOption" name="area" multiple="multiple"> 
<option value="0">00000</option> 
<option value="1">11111</option> 
<option value="2">22222</option> 
<option value="3">33333</option> 
<option value="4">44444</option> 
</select> 
</span> 
<span id="ddlOptionTip"></span> 
</p> 
</body> 
</html>

wanglu271991027
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery表单验证
前端视听
05-11 246
一：jQuery鼠标离焦验证手机号码 记录一下jQuery鼠标离焦验证手机号码，但鼠标离开了input输入框的时候，若填写的内容不符合手机号码验证规则或者填写为空，都会出现一行提示文字，提示请输入正确的手机号码，若符合，则通过验证，这也是在表单上经常使用到的。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <link
jQuery的表单验证
weixin_65795413的博客
03-24 664
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #myform label.error{ color: red; font-size: 14px;...
Jquery表单验证非空
qq_44339899的博客
07-24 1851
知识内容来自 W3School 教程 简单的表单验证，个人觉的有点繁琐，删除了点，不知道是优化还是加漏洞????，所以 把网站的源码贴出来大佬有时间看看来批评我，但是好使，绝对管用 写在页面和js文件内都可以，直接调用方法，别忘记引入js+jQuery文件就行 二手源码附上： //验证用户名非空 这段是处理登录用户名 function ValiDate_UserName(field, alerttxt) { var $UserName= $.trim($("#UserName").val())
jQuery表单验证插件
weixin_63719049的博客
03-24 1524
表单验证插件 表单验证规则 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #myform label.error{ color: #FF0000; } </style> <script src="js/jquery-3.3.1.js"></
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表单验证学习心得
zhongdianfen7713的博客
06-09 1029
jquery validate的官方演示和文档地址： 引用块内容 官方网站：http://jqueryvalidation.org/ 官方演示：http://jqueryvalidation.org/files/demo/ 官方文档：http://jqueryvalidation.org/documentation/ 在提交表单前常要对用户输入进行校验 .
JQuery-表单验证
qq_49246775的博客
12-07 6414
GiWiFI页面验证登录()表单验证
jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证
赶不上明天的博客
10-20 1823
jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证 如下图 话不多说直接先上jQuery代码 $(document).ready(function(){ var name = $(".id").val(); var tip1 = "<span class='span1'>用户名不能为空!</span>"; var tip2 = "<span class='span2'>邮箱格式错误或不能为空!</span>"; var tip3 =
jquery 表单验证插件
Gorden的博客
06-07 2281
jquery表单校验
jQuery 表单验证：简单而强大的表单验证方法
weixin_68250871的博客
05-23 692
【代码】jQuery 表单验证：简单而强大的表单验证方法。
Java Web Jquery表单验证
07-26
Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write.html、end.html、style.css。 1...
Jquery表单验证
06-30
**jQuery表单验证详解** 在Web开发中，表单验证是一项至关重要的任务，它确保用户输入的数据符合预期的格式和规则，从而防止错误数据的提交并提高用户体验。jQuery，一个流行的JavaScript库，提供了简单易用的API来...
JQuery表单验证
06-01
**jQuery表单验证** 在网页开发中，表单验证是一个必不可少的部分，它能确保用户输入的数据符合预期格式，从而防止无效数据的提交。jQuery作为一款轻量级的JavaScript库，提供了丰富的API和插件，使得表单验证变得...
Webkit简介以及工作流程
读心悦
07-10 311
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
最新发布
cc1314_工作、学习有感
07-12 194
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 309
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 167
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
javascript高级部分笔记
喵喵的博客
07-09 1273
javascript高级部分 Function方法 与 函数式编程 call 语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象。 说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。 let myName = 'goudan

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值