简单的jQuery验证插件的使用

最新推荐文章于 2024-03-23 09:36:04 发布
最新推荐文章于 2024-03-23 09:36:04 发布
阅读量96 收藏
点赞数
分类专栏： J2EE 文章标签： jQuery JavaScript CSS HTML ViewUI


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 <script src="jquery-1.4.2.js" type="text/javascript"></script>
 <script src="jquery.validate.js" type="text/javascript"></script>
 <script src="jquery.metadata.js" type="text/javascript"></script>
 <script src="jquery.validate.messages_cn.js" type="text/javascript"></script>
 <style type="text/css">
 .error{
  color:red;
 }
 
 
 </style>

  <script type="text/javascript">
  jQuery(document).ready(function(){
 //提交时验证表单
 jQuery("#submitButton").click(function(){
  if(!validator.form()){
   validator.focusInvalid();
   return false;
  }
  
  jQuery("#form1").submit();
 
 });
 
 //验证规则
 var validator = jQuery("#form1").validate({
  
  rules:{
   username:{required:true, minlength:2},
   email:{required:true, email:true},
   url:{url:true, minlength:2},
   comment:{required:true}
  },


  //这里加了一个错误位置，即把错误信息放在<td></td>里面
  errorPlacement:function(error,element){
   error.appendTo(element.parent("td").next("td"));
  }
 });

 

 //重置按钮的重置方法
 jQuery("#resetButton").click(function(){
  jQuery("#form1Table").find(":input[type='text']").attr("value","");
 });
  });

  </script>
 
</head>
<body >
  <h1>一个简单的jQuery验证例子</h1>
  <form id="form1" method="get" action="">
   <table id="form1Table">
    <tr>
     <td>
      用户名：
     </td>
     <td >
      <input type="text" name="username" size="25"/><font color="red">*</font> 
     </td>
     <td></td>
    </tr>
    <tr>
     <td>
      电子邮件：
     </td>
     <td >
      <input type="text" name="email" size="25"/><font color="red">*</font>
     </td>
     <td></td>
    </tr>
    <tr>
     <td>
      网址：
     </td>
     <td>
      <input type="text" name="url" size="25"/>
     </td>
     <td></td>
    </tr>
    <tr>
     <td>
      住址：
     </td>
     <td>
      <input type="text" name="comment" size="25"/><font color="red">*</font>
     </td>
     <td></td>
    </tr>
    <tr>
     <td>
      <input type="button" id="submitButton" value="提交"/>
     
     </td>
     <td>
      <input type="button" id="resetButton"  value="重置"/>
     </td>
    </tr>
   </table>
  </form>
 
</body>
</html>

zhxw121
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery-表达验证插件
qq_68180489的博客
04-25 154
jQueryValidate规则 1. 复选框全选 取消全选--html代码 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script src="js/check.js" type="text/javascript" charset="utf-8"></script> </head> <body>
jquery验证插件
12-02
jquery.validate。是jquery的一款验证插件，能够大大节省你的代码
jquery 验证插件
weixin_30741653的博客
12-06 48
默认校验规则(1)required:true 必输字段(2)remote:"check.php"使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true...
推荐一款强大的前端验证插件：jQuery Validation Engine
最新发布
gitblog_00088的博客
03-23 371
推荐一款强大的前端验证插件：jQuery Validation Engine 项目地址:https://gitcode.com/posabsolute/jQuery-Validation-Engine jQuery Validation Engine 是一个功能丰富的JavaScript库，它为Web表单提供了一流的验证和美化功能。这款开源项目利用jQuery的强大性能，使得开发者能够轻松地实现复...
jQuery插件验证
weixin_46230055的博客
06-20 159
一、前言 示例：在必填验证和比较验证中代码虽然简单，但是代码量多，然而，JQuery的Vakidate插件封装了常用的表单验证规则，这个插件可以简化表单验证。 二、视图代码 <body> <div> @using (Html.BeginForm("Index", "Home", FormMethod.Post,new { id="reginsterFrm"})) { <span>用户名：@Html.TextB
JQuery的validation插件
It_sharp的博客
10-13 446
插件获取途径 JQuery官方网站 Validation下载地址 简介 Validation–一个优秀的表单验证插件。 内置验证规则：拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则。 自定义验证规则：可以很方便地自定义验证规则。 简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能。 实时验证：可以通过keyup或
jQuery验证插件validate使用详解
10-22
主要为大家详细介绍了jQuery验证插件validate的使用方法，jQuery.validate.js插件用于对表单输入进行验证，对验证插件感兴趣的小伙伴们可以参考一下
jQuery验证插件validate使用方法详解
10-22
主要为大家详细介绍了jQuery验证插件validate使用方法，感兴趣的小伙伴们可以参考一下
jQuery validate验证插件使用详解
10-22
主要为大家详细介绍了jQuery validate验证插件用法，Validate是基于jQuery的一款轻量级验证插件，支持input,select,textarea的验证，感兴趣的小伙伴们可以参考一下
jQuery验证插件validation使用指南
12-12
jquery验证插件有很多，实现的功能也基本相同。本文介绍的只是jquery验证插件中的一种jquery.validate jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好...
jQuery验证插件Validate
dust__的博客
06-02 464
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。 该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 j
学习总结：jQuery插件——Validation Plugin
LemonTe-A
09-29 2111
本周的任务计划是学习并使用一款jQuery插件，所以在慕课网上找到了这个关于客户端表单验证的插件。插件简介：Validation插件是最常用的插件之一，客户端表单验证是现代网站经常采用的方式，可以减少服务器的压力，缩短用户等待时间和提升用户体验。jQuery Validation插件提供了很多的配置项目，还附带了很多验证方法及多语言提示。附上插件及演示源码链接：http://img.mukewang
jQuery Validation Plugin验证插件手动验证
axe的专栏
01-26 2264
jQuery Validation Plugin官网:http://jqueryvalidation.org/ 正常的验证模式如下: ... $('#ff').validate()这样只要点击提交按钮,插件会自动进行验证. 但是有时候我们想要点击其它按钮来验证一下表单,接着根据表单的验证结果来做剩下的事情. 查看源码发现有个form()方法,这个方法就是进行验证操作,虽然方法
jQuery validator 表单验证插件异步验证
qq_40774743的博客
11-22 479
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;   &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
jQuery插件&表单验证插件案例
qq_63492318的博客
03-22 1385
目录 1.自定义插件； 2.第三方插件； 3.表单验证插件的案例； 一、自定义插件 好，我们今天来看看在jQuery里面然后去自定义一个插件，以及后面Leaf用一个案例来带大家看看如何运用别人写好了的插件，也就是第三方插件： 1.1$.extend() 【作用一】实现对象继承 接下来我们就用一个案例来诠释这一作用点： 案例1：两个对象的继承； //首先定义两个对象 var s1 = {}; var s2 = {"name":"邓正威","sex":"男"}; //继承前 consol.
JQ验证插件的使用
小猪奋斗
06-15 996
jquery验证插件中的一种jquery.validate、jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。1.jquery.validate插件功能简单实现客户端信息验证，过滤不符合要求的信息2.jquery.validate官方地址官方地址：http://jqueryvalidation.org/,有详细
jQuery自定义插件以及引用表单验证插件
weixin_54401885的博客
03-22 1025
jQuery插件就是用jquery写的一些js代码，他能实现具体的功能，比如上传图片，弹出遮罩层，直接将js文件引入进页面就可以调用了，但是有一个前提，如果要用jQuery的插件，那么还需要导入jQuery库。 自定义插件 $.extend 【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2 // 案例1：对象间的继承（两个对象） $.extend($("#a1"),$("#a2")); ...
jQuery插件 -- 表单验证插件jquery.validate.js
热门推荐
Channing
07-05 9万+
最常使用JavaScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。作为一个标准的验证方法库，Validation拥有如下特点： 1.内置验证规则： 拥有必填、数字、Email、URL
基于jQuery的表单验证插件
05-18
jQuery是一个非常流行的JavaScript库，它提供了许多有用的函数和方法，可以方便地操作HTML文档中的元素和事件。在此基础上，开发者可以使用jQuery编写表单验证插件。 以下是一个基于jQuery的表单验证插件示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单验证插件示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $('#myForm').submit(function() { var name = $('#name').val(); var email = $('#email').val(); var password = $('#password').val(); if (name === '') { alert('请输入姓名！'); return false; } if (email === '') { alert('请输入电子邮件地址！'); return false; } if (!isValidEmail(email)) { alert('请输入有效的电子邮件地址！'); return false; } if (password === '') { alert('请输入密码！'); return false; } return true; }); function isValidEmail(email) { var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; return emailRegex.test(email); } }); </script> </head> <body> <form id="myForm"> <label for="name">姓名：</label> <input type="text" id="name" name="name" /><br /> <label for="email">电子邮件地址：</label> <input type="text" id="email" name="email" /><br /> <label for="password">密码：</label> <input type="password" id="password" name="password" /><br /> <input type="submit" value="提交" /> </form> </body> </html> ``` 在上面的示例中，我们使用了jQuery的`submit()`方法来监听表单提交事件。在表单提交之前，我们检查了每个字段是否有值，并且验证了电子邮件地址的格式。如果有任何一个字段的值不合法，我们就弹出一个警告框，并且返回`false`，阻止表单提交。否则，我们返回`true`，允许表单提交。 当然，这只是一个简单的示例，实际的表单验证插件可能会更加复杂和灵活。但是，这个示例可以帮助你了解如何使用jQuery来编写表单验证插件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值