jQuery表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

一、下载依赖包

网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224

二、 添加一个另外一个插件jquery.validate.messages_cn.js。

改变默认提示方式。

三、jQuery表单验证插件----通过name属性来关联字段来验证,将校验规则写到 js 代码中。

<!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>jQuery表单验证插件----通过name属性来关联字段来验证</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.messages_cn.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; }
</style>

  <script type="text/javascript">
  $(document).ready(function(){

    $("#commentForm").validate({
        rules: {
            username: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            url:"url",
            comment: "required"
        }
      });

  });
  </script>

</head>
<body>

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>jQuery表单验证插件----通过name属性来关联字段来验证</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>
     <input class="submit" type="submit" value="提交"/>
   </p>
 </fieldset>
 </form>

</body>
</html>
时间: 01-15

jQuery表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中的相关文章

jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 三.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 四.详细代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

jQuery表单美化插件jqTransform

jQuery Form表单美化插件jqTransform,非常实用的jQuery插件,自动把你整个Form表单进行美化处理,包括SELECT下拉框.文本框.单选.复选框.按钮等,当然不支持input file文件选择框,这个可以参照我们之前的input file选择框美化教程进行改造,在浏览器兼容方面,兼容 ie 6+, safari 2+, firefox 2+, 1.加载jQuery和插件 <script type="text/javascript" src="js

JavaScript/jQuery 表单美化插件小结

Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://www.emblematiq.com/lab/niceforms/demo/niceforms.html GitHub:https://github.com/emblematiq/Niceforms 使用方法,在页面头部引入以下脚本及样式即可: 复制代码 代码如下: <link href="ni

jQuery表单验证插件——jquery.validate.js

官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 1 <script src="../js/jquery.js" type="text/javascript"></script> 2 <script src="../js/jquery.validate.js" type="text/javascript&qu

【jQuery基础学习】06 jQuery表单验证插件-Validation

jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能 实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证 使用方法: 引用jQuery库和Validation插件 <script

【jquery】Validform,一款不错的 jquery 表单验证插件

关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,这样你可以随便添加或者去掉任一表单元素而不必修改验证代码,从而使仅用一行代码去完成整站的表单验证的梦想成为现实! 功能简介 可以在 input 上直接绑定正则,可

JQuery表单验证插件EasyValidator,超级简单易用!

本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. 顺便AD下刚出炉的小站,欢迎捧场:www.paipaiyou.com EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: <input name="name" tip

jquery表单验证使用插件formValidator

jquery表单验证使用插件formValidator,可供有需求的朋友参考 1.首先在项目中添加必备js与css  2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/for

jQuery用面向对象的思想来编写验证表单的插件

本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下面是一个完整的html页面代码,可以直接运行测试的. <html> <head><title>jQuery用面向对象的思想来编写验证表单的插件</title> <style type="text/css"> form {margi