简单的jQuery验证插件的使用

最新推荐文章于 2022-06-07 01:34:08 发布
最新推荐文章于 2022-06-07 01:34:08 发布
阅读量100 收藏
点赞数
分类专栏： 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 163
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 Validation Engine
最新发布
gitblog_00088的博客
03-23 396
推荐一款强大的前端验证插件：jQuery Validation Engine 项目地址:https://gitcode.com/posabsolute/jQuery-Validation-Engine jQuery Validation Engine 是一个功能丰富的JavaScript库，它为Web表单提供了一流的验证和美化功能。这款开源项目利用jQuery的强大性能，使得开发者能够轻松地实现复...
jQuery-Validate验证插件的使用步骤详解
武哥聊编程
05-25 8万+
我们知道，用户在注册的时候，会有个表单页面，然后有些选项是必填的，有些要填的内容是有规范的，这些都要在用户提交之前进行验证才行，如果不符合要求，需要在右边显示一个友好的提示，让用户修改。 　　记得以前在学习Servlet的时候，实现一个简单的用户注册功能的验证是在后台做的，有些用了正则表达式，有些没用，但是都比较简单。流程是这样的，前台提交表单数据后，servlet获取数据
jQuery插件 -- 表单验证插件jquery.validate.js
热门推荐
Channing
07-05 9万+
最常使用JavaScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。作为一个标准的验证方法库，Validation拥有如下特点： 1.内置验证规则： 拥有必填、数字、Email、URL
jQuery插件验证
weixin_46230055的博客
06-20 160
一、前言 示例：在必填验证和比较验证中代码虽然简单，但是代码量多，然而，JQuery的Vakidate插件封装了常用的表单验证规则，这个插件可以简化表单验证。 二、视图代码 <body> <div> @using (Html.BeginForm("Index", "Home", FormMethod.Post,new { id="reginsterFrm"})) { <span>用户名：@Html.TextB
jQuery Validate 表单验证插件
xiangxiao_bobo的专栏
08-18 2168
一、jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。 该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，.
jQuery验证插件validate使用详解
10-22
jQuery验证插件validate是用于对HTML表单进行数据...总结，jQuery验证插件validate为前端开发提供了强大的表单验证功能，通过灵活的配置和扩展，可以轻松应对各种表单验证需求，提升用户体验，减少无效的服务器端负载。
jQuery验证插件validate使用方法详解
10-22
主要为大家详细介绍了jQuery验证插件validate使用方法，感兴趣的小伙伴们可以参考一下
jQuery validate验证插件使用详解
10-22
jQuery Validate 是一个非常实用的轻量级验证插件，它基于 jQuery 库，为开发者提供了简单易用的接口来实现表单验证。该插件支持对 input、select 和 textarea 进行验证，确保用户输入的数据符合预设的规则，从而...
jQuery验证插件validation使用指南
12-12
jquery验证插件有很多，实现的功能也基本相同。本文介绍的只是jquery验证插件中的一种jquery.validate jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好...
jquery验证插件
12-02
jquery.validate。是jquery的一款验证插件，能够大大节省你的代码
jQuery validator 表单验证插件
qq_40774743的博客
11-20 519
&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; &lt
jQuery表单验证插件Validator的使用方法
justforuse的博客
03-15 6584
from表单数据的合法性验证是个很常见的需求，jQuery提供了一个插件：jquery validate 官网下载。 　　　若想使用需先引用jquery.validate.js，并且要在jquery.js之后引用。<script src="js/jquery.js"></script> <script src="js/jquery.validate.js"></script>　　　把现在写的项目拿
jquery 表单验证插件
Gorden的博客
06-07 2285
jquery表单校验
JQuery的validation插件
It_sharp的博客
10-13 448
插件获取途径 JQuery官方网站 Validation下载地址 简介 Validation–一个优秀的表单验证插件。 内置验证规则：拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则。 自定义验证规则：可以很方便地自定义验证规则。 简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能。 实时验证：可以通过keyup或
jQuery插件&表单验证插件案例
qq_63492318的博客
03-22 1387
目录 1.自定义插件； 2.第三方插件； 3.表单验证插件的案例； 一、自定义插件 好，我们今天来看看在jQuery里面然后去自定义一个插件，以及后面Leaf用一个案例来带大家看看如何运用别人写好了的插件，也就是第三方插件： 1.1$.extend() 【作用一】实现对象继承 接下来我们就用一个案例来诠释这一作用点： 案例1：两个对象的继承； //首先定义两个对象 var s1 = {}; var s2 = {"name":"邓正威","sex":"男"}; //继承前 consol.
jQuery-05
weixin_65088316的博客
03-24 717
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入jQuery库 --> <style type="text/css"> #myForm label.error{ color:red; ...
JQ验证插件的使用
小猪奋斗
06-15 999
jquery验证插件中的一种jquery.validate、jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。1.jquery.validate插件功能简单实现客户端信息验证，过滤不符合要求的信息2.jquery.validate官方地址官方地址：http://jqueryvalidation.org/,有详细
使用JQuery的插件validation完成表单验证
fulishafulisha的博客
08-26 7266
validation插件（自己去网上下载） 1.在使用Jquery插件时先引入Jquery库 再引入Validation插件 &lt;script src="js/jquery-1.11.3.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;!-- 引入表单验证插件 --&gt; &lt;script type="text/javasc...
jQuery验证插件：jquery-validation详解
jQuery-validation 是一个广泛使用的jQuery插件，它的主要目标是简化网页表单的验证过程。项目主页位于http://bassistance.de/jquery-plugins/jquery-plugin-validation/，而API文档可以参考...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值