jquery validation插件表单验证的一个例子


Posted in Javascript onMarch 03, 2010

messages_cn.js <!--验证国际化,中文--> (不引用messages_cn.js是英文的提示,用了是中文)

required: "This field is required.", 
remote: "Please fix this field.", 
email: "Please enter a valid email address.", 
url: "Please enter a valid URL.", 
date: "Please enter a valid date.", 
dateISO: "Please enter a valid date (ISO).", 
dateDE: "Bitte geben Sie ein gültiges Datum ein.", 
number: "Please enter a valid number.", 
numberDE: "Bitte geben Sie eine Nummer ein.", 
digits: "Please enter only digits", 
creditcard: "Please enter a valid credit card number.", 
equalTo: "Please enter the same value again.", 
accept: "Please enter a value with a valid extension 
maxlength: Please enter no more than {0} characters 
minlength: Please enter at least {0} characters 
rangelength: Please enter a value between {0} and {1} characters long. 
range: Please enter a value between {0} and {1}. 
max: Please enter a value less than or equal to {0}. 
min: Please enter a value greater than or equal to {0}. 
<script type="text/javascript"> 
$(function() { 
$("#btnOk").click(function() { 
$("#form1").validate({ rules: { 
username: { required: true, minlength: 2 }, 
email: { required: true, email: true }, 
url: { required: true, url: true }, 
comment: "required" 
} 
}); 
}); 
}); 
</script> 
<body> 
<form id="form1" runat="server" action="" method="get"> 
<fieldset> 
<legend>一个简单的验证带验证评论的例子</legend> 
<p> 
<label for="cusername">姓名</label><em>*</em> 
<input type="text" id="cusername" name="username" size="25"/> 
</p> 
<p> 
<label for="cemail">邮件</label><em>*</em> 
<input type="text" id="cemail" name="email" size="25"/> 
</p> 
<p> 
<label for="curl">网址</label><em>*</em> 
<input type="text" id="curl" name="url" size="25"/> 
</p> 
<p> 
<label for="ccomment">你的评论</label><em>*</em> 
<textarea id="ccomment" name="comment"cols="22"></textarea> 
</p> 
<p> 
<%--<input type="submit" id="send" value="提交"/>--%> 
<asp:Button ID="btnOk" runat="server" Text="提交" onclick="btnOk_Click"/> 
</p> 
</fieldset> 
</form> 
</body>
Javascript 相关文章推荐
Javascript Math对象
Aug 13 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
Jquery 实现Tab效果 思路是js思路
Mar 02 #Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 #Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 #Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 #Javascript
Javascript 自定义类型方法小结
Mar 02 #Javascript
Javascript Cookie读写删除操作的函数
Mar 02 #Javascript
28个JS验证函数收集
Mar 02 #Javascript
You might like
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP重载基础知识回顾
2020/09/10 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
浅说js变量
2011/05/25 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
Python3实现Web网页图片下载
2016/01/28 Python
发布你的Python模块详解
2016/09/15 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
基于python实现地址和经纬度转换
2020/05/19 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
锐步英国官网:Reebok英国
2019/11/29 全球购物
一套C++笔试题面试题
2012/06/06 面试题
秋季运动会稿件
2014/01/30 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
建筑工地标语
2014/06/18 职场文书
加强作风建设心得体会
2014/10/22 职场文书