文档章节

jquery validate表单校验的使用

老武子
 老武子
发布于 2017/08/14 16:46
字数 329
阅读 17
收藏 0

jquery validate详细的使用教程见 菜鸟教程.

登录表单校验常用:

 $loginForm.validate({
            errorElement: "span", // contain the error msg in a span tag
            errorClass: 'help-block',
            //验证规则
            rules: {
                loginusername:{
                    required: true,
                    pattern: /^13[0-9]{1}[0-9]{8}$|15[012356789]{1}[0-9]{8}$|18[012356789]{1}[0-9]{8}$|147[0-9]{8}$/,
                },
                loginpassword: {
                    required: true
                },
                captcha:{
                	 required: true
                }
            },
            ignore: "",
            //验证提示信息
            messages: {
                loginusername:{
                    required: "请输入正确的手机号!",
                    pattern: "请输入正确的手机号!"
                },
                loginpassword: {
                    required:"请输入密码!"
                },
                 captcha: {
                    required:"请输入验证码!"
                }
            },
            //验证提示效果设置
            highlight: function (element) {
                $(element).closest('.help-block').removeClass('valid');
                          },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error ');
            },
            success: function (label, element) {
                label.addClass('help-block valid');
                            },
            errorPlacement: function(error, element) {  
			  	error.appendTo($(element).closest('.form-group'));
			},
            submitHandler: function (form) {
                $.ajax({
                    url: "${base}/test.jhtml",
                    type: "GET",
                    dataType: "json",
                    cache: false,
                    async: false,
                    beforeSend: function() {
                        $submit.prop("disabled", true);
                    },
                    success: function(data) {              
                        $.ajax({
                            url: $loginForm.attr("action"),
                            type: "POST",
                            data: {
                                username: $username.val(),
                                enPassword: enPassword,
                                captchaId: captchaId,
                                captcha: $captcha.val()
                            },
                            dataType: "json",
                            cache: false,
                            async: false,
                            success: function(message) {
                                $submit.prop("disabled", false);
                                if (message.type == "success") {
                                    // 关闭登录框
                                    $("#closeLodinModal").click();
                                } else {
                                    // 清空输入的验证码
                                    $captcha.val("");
                                    // 更新图片验证码
                                    $captchaImage.click();
                                    // 显示错误信息
                                    $("#sendMessageFail").html(message.content);
                                    messageTime=5;
                                    // 定时清除错误信息
                                    TimeDeleteMessage();
                                }
                            }
                        });
                    }
                });
            }
        });

jquey validate 使用ajax后台校验..一般用于重复检查等:

	
	// 表单验证
	$inputForm.validate({
		rules: {
			artsbirdIdEn: {
				required: true,
				pattern: /^[0-9a-zA-Z_\u4e00-\u9fa5]+$/,
				remote: {
					url: "check.jhtml?oldArtsbirdIdEn=${product.goods.artsbirdIdEn}",
					cache: false
				}
			}
		},
		messages: {
			artsbirdIdEn: {
				pattern: "含有非法字符!",
				remote: "已存在!"
			}
		},
		submitHandler: function(form) {
						form.submit();
		}
	});
	
});

(错误提示样式,前端搞定.)

© 著作权归作者所有

老武子
粉丝 0
博文 15
码字总数 3390
作品 0
南汇
程序员
私信 提问
自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
229
0
如何结合Jquery 的validate 和 ajax submit进行工作.

我刚接触Jquery,需要修改公司的重做公司的一个系统,准备用Jquery做JS框架,遇到一个问题. 我们知道Jquery 的jquery.validate.js的这个函数可以帮我做表单的验证,用于帮定错误信息到各个属性,...

wjyy
2013/05/23
13.2K
6
实战jQuery和PHP CodeIgniter表单验证

前言   在Web建站中,表单的合法性验证是十分重要的一个环节,其中包括客户端浏览器的Javascript的验证和服务端的验证。在本文中将指导读者使用jQuery中的validate验证框架实现浏览器端的验...

彼得
2014/03/08
69
0
简单好用的表单校验插件——jQuery Validate基本使用方法总结

jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0 1.基本用法 从字面就知道既然是jquery的插件,首先得引入...

Gaia_bing
2018/07/20
0
0
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

刚哥谈架构 (二) 我眼中的架构师

之前在公司,有小伙伴在向别人介绍我的时候,经常会有人这么说:“刚哥是我们的architcture”,如果来人是老外,心中一定是一惊,心中暗叹,“这位匪首看上去貌不惊人,难道已经做到了架构和...

naughty
50分钟前
5
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
126
4
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部