当前位置:首页 > 编程教程 > jQuery技术文章 > jquery插件validate验证的小例子

jquery插件validate使用示例

  • 发布时间:
  • 作者:码农之家
  • 点击:169

这篇文章主要知识点是关于jquery、validate、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript和jQuery实战手册
  • 类型:JavaScript大小:103 MB格式:PDF作者:大卫·索耶·麦克法兰德
立即下载

jquery插件validate验证的小例子

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
   <!-- 注意引用顺序-->
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script src="jquery.validate.js" type="text/javascript"></script>
    <script src="messages_cn.js" type="text/javascript"></script>
    <script type="text/javascript">
//        $(function () {
//            $('#a').validate({
//                rules: {
//                    username: { required: true, minlength: 6, maxlength: 12 },
//                    email: { required: true, email: true }
//                },
//                errorshow: function (error, element) {
//                    error.appendTo(element.siblings('span'));
//                }

 

//            })


        //        })
        $(function () {
            $('#a').validate({
                rules: {
                    username: { required: true, minlength: 6, maxlength: 12 },
                    email: { required: true, email: true },
                    pwd: { required: true, rangelength:[6,6] },
                    again: { required: true, equalTo: ($('#aa')) }, //这里一定是id
                    birthday:{date:true},
                    blood:{digits:true}
                },
                errorshow: function (error, element) {
                    error.appendTo(element.siblings('span'));
                }

            })

        })
    </script>
</head>

<body>
<form  id="a">
<div>
用户名:<input type="text" name="username" /><span ></span>
<br />
邮箱:<input type="text" name="email" /><span ></span>
<br />
密码:<input type="text" name="pwd" /><span id="aa"></span>
<br />
确认密码:<input type="text" name="again"  /><span ></span>
<br />
生日:<input type="text" name="birthday" /><span ></span>
<br />
血压:<input type="text" name="blood" /><span ></span>
</div>
</form>
</body>
</html>

 

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.175757

关于jquery.validate1.9.0前台验证的使用介绍

一、利用jquery.form插件提交表单方法使用jquery.validate插件 现象:当提交表单时,即使前台未验证通过,也照常提交表单。 解决办法: $('#myForm').submit(function(){ if (!$(this).valid()) return false;//加上此句OK $('.error').html(''); $("#go").prop("disabled",true); $(this).ajaxSubmit({ type:"POST", //beforeSubmit: showRequest, dataType:'json', success: showResponse }); return false; }); 相关说明: 定制提交方式(ajax提交) 如果使用ajax方式提交,那请采用如下两种方式和校验框架结合 1)、使用submitHandler属性配置ajax提交,submithandler:当表单全部校验通过之后会回调配置的代码,此处也就是当校验通过之后调用ajax提交。 2)、使用valid方法,监听form的submit事件,当$('#form').valid()返回true的时候再提交。 通过监听form的submit事件,对form进行ajax提交。示例完整代码如下: $(document).ready(function(){ $('#myForm').submit(functio……

网友NO.369295

jquery validate和jquery form 插件组合实现验证表单后AJAX提交

要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件——jquery validate.js 和 jquery form.js.具体详细说明情况下文。 1、jQuery validate.js ,它说白了就是一个很高尚的人为我们写好了各种表单的验证,不用我们这些童鞋去现写了,一天天的多累啊,呵呵。 2、jQuery form.js ,“这个插件能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm 和 ajaxSubmit, 能够从form组件里采集信息确定如何处理表单的提交过程。两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制。这让采用AJAX方式提交一个表单的过程简单的不能再简单了! ”。 下面请看代码示例: 表单: form action="@Url.Action("AddColumns","Content")" method="post" id="AddColumnsForm" div class="form-group js-EditCol" id="AddName" label class="contro……

网友NO.522025

jQuery Validate表单验证插件实现代码

1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家。 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情。要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素; 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击、获取焦点、失去焦点等事件,并设置这些事件对应的执行函数; 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式。 这3类基本要素中,html表单结构的创建相对简单。表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息。这里我参考了百度,163邮箱,京东等知名互联网……

网友NO.807501

功能强大的jquery.validate表单验证插件

本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 、表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家。 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情。要做好表单验证,需要准备以下基本要素: 1).html表单结构:包含需要校验的表单元素; 2).js逻辑控制:在需要校验的表单元素上绑定事件,如点击、获取焦点、失去焦点等事件,并设置这些事件对应的执行函数; 3).css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式。 这3类基本要素中,html表单结构的创建相对简单。表单验证的重点和难点在于如何利……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com