jQuery Validate (登录页面相关验证)

$(function() {
var submit = false;
var superHtml = [];
/**
* 匹配企业帐号,以字母开头,长度在6-20之间,只能包含字符、数字和下划线。
*/
// jQuery.validator.addMethod("userNameIsFormart", function(value, element) {
// return this.optional(element) || /^[a-zA-Z]\w{5,19}$/.test(value);
// }, "企业名称格式:以字母开头,长度在6-20字符之间,只能包含字符、数字和下划线。");
/**
* 验证企业名称是否存在;
*/
// jQuery.validator.addMethod("userNameIsExist", function(value, element) {
// return action.checkUserName();
// }, "该企业名称不存在。");

/**
* 匹配密码,长度在6-20之间。
*/
// jQuery.validator.addMethod("pwdIsFormart", function(value, element) {
// return this.optional(element) || /^.{6,20}$/.test(value);
// }, "企业密码格式:长度在6-20字符之间");

/**
* 验证的调用方法 if(!validator.valid()){ return false; } 验证重新启动 validator.reset();
*/
var validator = {
validator : null,
valid : function($this) {
// 如果验证通过,设置提示信息消失
if(this.validator.element($this)){
$this.parentNode.children[1].remove();
}
return this.validator.element($this);
},
validForm : function() {
return this.validator.form();
},
reset : function() {
this.validator.resetForm();
},
init : function() {
this.validator = $(‘#frm_login‘).validate({
// ignore: [],//设置验证隐藏表单域
rules : {
‘userName‘ : {
required : true,
// userNameIsFormart : true,
// userNameIsExist : true
},
‘password‘ : {
required : true,
// pwdIsFormart : true
},
},
/* 设置错误信息 */
messages : {
‘userName‘ : {
required : "请输入企业名称。",
userNameIsFormart : "用户名或者密码错误。"
// userNameIsExist : "该企业名称不存在。"
},
‘password‘ : {
required : "请输入企业密码。",
pwdIsFormart : "用户名或者密码错误。"
}
},
onkeyup : false, // disable key up
onfocusout : false, // disable focus out
// showErrors : function(errorMap, errorList) {
// if (errorList.length) {
// alert(errorList[0].message);
// }
// }
errorPlacement : function(error, element){
if(($(element).val() == "") || ( element.closest(‘div‘).find(‘span‘).length > 0 ) ){
element.closest(‘div‘).find(‘span‘).remove();
}
element.closest(‘div‘).append(‘<span style="color: red">‘ + error.text() + ‘</span>‘);
}

});
}

};
validator.init();
var action = {
/**
* 验证该用户名是否已被使用
*/
checkUserName : function() {
var url = contentPath + "/sysUser/testSysUserExist";
var param = {};
param.userName = $(‘#userName‘).val();
param.type = $(‘#type‘).val();
var valState = true;
$.ajax({
url : url,// 查询方法的url
data : param, // params
type : "post",
dataType : "json",
async : false,
success : function(data) {
if (data.data.exist) {
valState = true;
} else {
valState = false;
}
}
});
return valState;
}
};

var bind = {
bind_event : function() {
//
$(‘#btn_do_login‘).on(‘click‘, function(e) {
e.preventDefault();
if (!validator.validForm()) {
return false;
}
if (submit) {
return;
}
submit = true;
$(this).attr(‘disabled‘, true);
//
var url = contentPath + "/doLogin";
var param = {};
param.username = $("#userName").val(); // 企业账号
param.password = $("#password").val(); // 企业密码
param.type = $("#type").val(); // 用户类型
$.ajax({
url : url,
data : param,
type : ‘POST‘,
dataType : ‘json‘,
success : function(data) {
submit = false;
$(‘#btn_do_login‘).attr(‘disabled‘, false);
if (data.status === "success") {
window.location.href = contentPath + "/";
} else {
// alert(data.msg);
$(‘#password‘).closest(‘div‘).append(‘<span style="color: red">‘ + data.msg + ‘</span>‘);

}
},
error : function() {
window.location.href = contentPath + "/error";
}
});
});

/**
* 企业名称获得焦点,将提示消息清空
*/
$(‘#userName‘).on(‘focus‘, function() {
$(‘#userName‘).closest(‘div‘).find(‘span‘).remove();
});

/**
* 企业密码获得焦点,将提示消息清空
*/
$(‘#password‘).on(‘focus‘, function() {
$(‘#password‘).closest(‘div‘).find(‘span‘).remove();
});

/**
* 企业账号失去焦点事件
*/
// $(‘#userName‘).on(‘blur‘, function() {
// validator.valid(this);
// });

/**
* 企业密码失去焦点事件
*/
// $(‘#password‘).on(‘blur‘, function() {
// validator.valid(this);
// });

}

};
bind.bind_event();
});

时间: 2024-08-02 20:38:07

jQuery Validate (登录页面相关验证)的相关文章

jquery.validate.js表单验证

引用jquery封装好的js文件进行表单验证,提高了Web开发的效率.我写了一个验证的实例给大家展示一下. 实例中包含的验证方法还不全面,如果没有大家想要的可以通过 百度搜索关键:jquery.validate.js表单验证帮助文档来进行查阅. 引入的js文件: <script type="text/javascript" src="js/jquery-1.11.2.js"></script> <script type="te

基于Jquery Validate 的表单验证

基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Validate的表单验证前,我们先回顾一下基础纯JS的表单验证. 1.回顾基于JS的表单验证 我们先写一个简单的验证邮箱.手机号的表单,页面代码如下: 1 <form action="XXXX.action" method="post" onsubmit="r

Jquery.validate.js表单验证插件的使用

作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例讲解应用.it's perfect. 首先记录一些使用过程中,爱犯的错误: 1>忘记给表单form添加id属性 2>input这些表单标签必须id属性和name属性名字一样.例如:<input type="text" id="name" name=&q

jquery.validate remote 和 自定义验证方法

jquery.validate remote 和 自定义验证方法 $(function(){ var validator = $("#enterRegForm").validate({debug:false, //调试模式取消submit的默认提交功能//errorClass: "error",//默认为错误的样式类为:error//validClass: "check",//验证成功后的样式,默认字符串validfocusInvalid: tr

[记录]jquery validate 不用submit方式验证表单或单个元素

jquery validate 不用submit方式验证表单或单个元素 jQuery validate的版本: v1.14.0 var result = $('#myForm').validate({ errorElement : 'span', errorClass : 'help-block error', rules:{ }, message:{ } }).form(); 具体的内容可以参考官网文档:http://jqueryvalidation.org/documentation/#li

jquery后台登录页面背景图片自动轮换登录界面代码

在别的网站上看到的比较炫酷的Web登陆界面,背景图片可以自动轮换.介绍给大家,有兴趣的可以下来改改当做自己系统的登陆界面. 如图: 点击下载源代码 jquery后台登录页面背景图片自动轮换登录界面代码

jQuery.validate.js表单验证插件

jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e

jquery validate.js表单验证的基本用法入门--不用写繁琐的验证代码了...

jquery.validate.js是jquery下的一个验证插件,功能比较强大,早就有所耳闻但是一只没有动手用过,现在在于能够研究一下了. 这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 1 <script type="text/javascript"> 2 function lang(key) { 3 mylang = { 4 'ls_input_myb': '请输入您的账户', 5 'ls_myb_email': '漫游

jquery validate触发表单验证

jquery validate是常用的表单验证插件.遇到一个jquery validate表单验证不触发的问题 目前写法:$(function(){  $("#form").validate({     rules : {            themeColor: {                required : true            },            --        },        messages : {            themeCol