第九章 jQuery验证插件简介
2024-05-09 19:56:45
1. 表单验证插件-----Validation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script><script src="lib/jquery.validate.js" type="text/javascript"></script><style type="text/css">*{font-family: Verdana;font-size: 96%;}label{width: 10em;float: left;}label.error{float: none;color: red;padding-left: .5em;vertical-align: top;}p{clear: both;}.submit{margin-left: 12em;}em{font-weight: bold;padding-right: 1em;vertical-align: top;}em.error{background: url("images/unchecked.gif") no-repeat 0px 0px;padding-left: 16px;}em.success{background: url("images/checked.gif") no-repeat 0px 0px;padding-left: 16px;}</style><script type="text/javascript">$(document).ready(function () {//自定义一个验证方法
$.validator.addMethod("formula", //验证方法名称function (value, element, param) {//验证规则return value == eval(param);},'请正确输入数学公式计算后的结果'//验证提示信息
);$("#commentForm").validate({rules: {username: {required: true,minlength: 2},email: {required: true,email: true},url: "url",comment: "required",valcode: {formula: "7+9"}},messages: {username: {required: '请输入姓名',minlength: '请至少输入两个字符'},email: {required: '请输入电子邮件',email: '请检查电子邮件的格式'},url: '请检查网址的格式',comment: '请输入您的评论'},errorElement: "em", //用来创建错误提示信息标签
success: function (label) { //验证成功后的执行的回调函数//label指向上面那个错误提示信息标签em
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}});});</script>
</head>
<body><form class="cmxform" id="commentForm" method="get" action=""><fieldset><legend>一个简单的验证带验证提示的评论例子</legend><p><label for="cusername">姓名</label><em>*</em><input id="cusername" name="username" size="25" /></p><p><label for="cemail">电子邮件</label><em>*</em><input id="cemail" name="email" size="25" /></p><p><label for="curl">网址</label><em></em><input id="curl" name="url" size="25" value="" /></p><p><label for="ccomment">你的评论</label><em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea></p><p><label for="cvalcode">验证码</label><input id="cvalcode" name="valcode" size="25" value="" />=7+9</p><p><input class="submit" type="submit" value="提交" /></p></fieldset></form>
</body>
</html>2.表单验证插件-----Validation Engine
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Validation Engine 表单验证中文版 » 在线演示 - 前端开发仓库</title>
<link rel="stylesheet" href="/css/demo.css">
<link rel="stylesheet" href="css/validationEngine.jquery.css">
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<div class="wrap"><div class="side"><div class="logo"><a href="http://code.ciaoca.com/" target="_blank">前端开发仓库</a><em>在线演示</em></div></div><div class="main"><div class="inwrap"><h1>jQuery Validation Engine 表单验证中文版</h1><h2>较好体验的中文表单</h2><div class="detail"><p>示例中经过样式调整，以及使用部分参数来提高用户体验。</p></div><div class="example"><form id="user_form" class="user_form formular" method="post"><fieldset><legend>账号资料</legend><dl class="form_add"><dt>用户名</dt><dd><input class="text-input validate[required]" type="text"></dd><dt>密码</dt><dd><input class="text-input validate[required,minSize[6],maxSize[20]]" type="password" id="pwd"></dd><dt>确认密码</dt><dd><input class="text-input validate[condRequired[pwd],equals[pwd]]" type="password"></dd></dl></fieldset><fieldset><legend>个人信息</legend><dl class="form_add"><dt>姓名</dt><dd><input class="text-input validate[required,custom[chinese],minSize[2]]" type="text" id="name"></dd><dt>出生日期</dt><dd><input class="text-input validate[required,custom[date]]" type="text"></dd><dt>手机号码</dt><dd><input class="text-input validate[required,custom[phone]]" type="text"></dd><dt>身份证号码</dt><dd><input class="text-input validate[required,custom[chinaId]]" type="text"></dd><dt>QQ</dt><dd><input class="text-input validate[required,custom[qq]]" type="text"></dd><dt>E-mail</dt><dd><input class="text-input validate[required,custom[email]]" type="text"></dd><dt>网站/博客</dt><dd><input class="text-input validate[required,custom[url]]" type="text"></dd></dl></fieldset><fieldset><legend>收件人信息</legend><dl class="form_add"><dt>所在地</dt><dd><select class="validate[required]"><option value="">请选择</option><option value="option1">国内</option><option value="option2">国外</option></select></dd><dt>街道地址</dt><dd><input class="text-input validate[required,minSize[10]]" type="text"></dd><dt>邮编</dt><dd><input class="text-input validate[required,custom[chinaZip]]" type="text"></dd></dl></fieldset><fieldset><legend>其他</legend><dl class="form_add"><dt>验证码</dt><dd><input class="text-input validate[required,ajax[ajaxVerify]]" type="text" style="width:100px;" data-prompt-position="centerRight:100,0"> <img src="img/verify.jpg" width="90" height="26"></dd><dt></dt><dd><input class="radio validate[required]" type="checkbox" id="agree" name="agree" data-prompt-position="centerRight:80,0"> <label for="agree">同意用户协议</label></dd></dl></fieldset><input class="submit" type="submit" value="验证 & 提交表单"></form></div></div></div>
</div><script src="/js/jquery-1.7.2.min.js"></script>
<script src="js/languages/jquery.validationEngine-zh-CN-ciaoca.js"></script>
<script src="js/jquery.validationEngine.min.js"></script>
<script>
$.validationEngineLanguage.allRules.ajaxVerify={url: 'phpajax/ajaxValidateVerify.php',extraData: 'name=eric',alertTextOk: '<strong style="color:#090;">√<strong>',alertText: '<strong>×</strong>',alertTextLoad: ''
};jQuery(document).ready(function(){// binds form submission and fields to the validation engine
jQuery('#user_form').validationEngine({ scroll: false,//binded: false,//showArrow: false,
promptPosition: 'centerRight',maxErrorsPerField: 1,showOneMessage: true,addPromptClass: 'formError-noArrow formError-text',custom_error_messages: {'#pwd': {'minSize': {'message': '* 密码不得少于 6 位，建议使用英文与数字组合'}}}});
});
</script>
</body>
</html>转载于:https://www.cnblogs.com/shuibing/p/4121791.html
第九章 jQuery验证插件简介相关推荐
- jQuery验证插件
jQuery验证插件 原文:jQuery验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插 ...
- ajax 阻止默认提交,jQuery验证插件：在对ajax调用servlet时，submitHandler不会阻止默认提交-返回false无效...
我有一个使用jquery和servlet的简单表单.jQuery对Servlet进行Ajax调用,然后Servlet进行一些服务器端计算,然后通过jQuery在同一页面上显示结果.我不希望表单进行默认 ...
- [Jquery Plugin]Jquery Tabs 插件简介-更友好地组织你的页面 （转）
转自:http://www.cnblogs.com/ywqu/archive/2009/09/02/1558423.html 关于Jquery Tab插件,比较流行的是jQuery UI Tabs,最 ...
- 网站开发常用jQuery插件总结(四）验证插件validation
在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验 ...
- 12个方便易用的jquery表单验证插件
绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...
- 《Reids 设计与实现》第九章 事件
<Reids 设计与实现>第九章 事件 文章目录 <Reids 设计与实现>第九章 事件 一.简介 二.文件事件 1.文件事件处理器的构成 2.I/O 多路复用程序的实现 3. ...
- ajax post 不起作用,jQuery验证submitHandler在$ .ajax post表单数据中不起作用
我使用$.ajax发送数据并使用jQuery验证插件进行验证,如下所示: Send JS: jQuery(document).ready(function ($) { $('#myform').val ...
- jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- (转)强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
- 强大的JQuery表单验证插件 FormValidator使用介绍
jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者( ...
最新文章
- SpringDataRedis对Redis的数据类型的常用操作API的使用代码举例
- 在线压缩png图像工具
- 机器学习分类算法_机器学习分类算法
- java.lang.NoSuchMethodError: org.springframework.beans.MutablePropertyValues.add
- 信息学奥赛一本通（1250：The Castle）
- 各种ListView列表方法
- React Ant design table表单与pagination分页配置
- 游戏框架（框架入门篇）
- win10设置任务栏全透明、免安装第三方软件
- word小技巧之表格插入行
- [渝粤教育] 西安邮电大学 金融学A 参考 资料
- 双问号??在 js 中的应用
- Python +大数据-知行教育(四)-意向用户主题看板_全量流程
- 用浏览器的油猴子脚本调用IDM下载百度云盘中的资料
- Python 把几张图片拼接成一张图片，并且写上文字
- Linux命令全家桶以及vim/gcc/gdb/makefile/yum
- pushstate 和 popstate的用法详解
- SATA协议固态硬盘的S.M.A.R.T详解
- 基于Ad hoc的多跳通信
- 群老大——区块链社群将成为主流的生产组织