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();
});
jQuery Validate (登录页面相关验证)的更多相关文章
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- 【转】jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- [转]jquery.validate.js表单验证
原文地址:https://www.cnblogs.com/si-shaohua/p/3780321.html 一.用前必备官方网站:http://bassistance.de/jquery-plugi ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- 360浏览器下jquery.validate.unobtrusive的日期验证问题
今天在招聘频道(job.cnblogs.com)遭遇这样一个问题——在360浏览器下,在一个表单验证中,虽然输入了有效的日期,却总是提示日期格式错误,见下图: 而在Chrome/Safari/Fire ...
- jquery.validate.js使用id验证控件
jquery.validate.js默认的是元素的name. 例如:<input name="username" id="username" size=& ...
- 异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
- 基于Bootstrap+jQuery.validate Form表单验证实践
基于Bootstrap jQuery.validate Form表单验证实践 项目结构 : github 上源码地址:https://github.com/starzou/front-end- ...
随机推荐
- 【[SHOI2007]园丁的烦恼】
\(CDQ\) 分治的神奇操作 这个问题跟偏序问题好像差的不小啊 但是就是可以转化过去 对于一个查询我们可以把它拆成四个,也就是用二维前缀和的方式来查询 我们发现其实前缀和的定义就是多少个点的横纵坐标 ...
- WEB安全 魔术引号及注入类型
一.魔术引号 1. magic_quotes_gpc 变量 什么是魔术引号 Warning本特性已自 PHP 5.3.0 起废弃并将自 PHP 5.4.0 起移除.当打开时,所有的 '(单引号),&q ...
- browserify文件后函数调用报is not defined的原因
举个例子: a.js ; module.exports.a = a; b.js var result = require('./a'); var getA =() => { console.lo ...
- 自己制作html页面用的字体图标。
从网上看到的一个制作字体图标的教程,自己试用过,确实还不错,就把教程搬过来了,方便查看. 我们UI做出来矢量的图,放到这个软件里操作,下面有教程,之后输入.ttf或是.otf格式的字体,我是在网上找了 ...
- Altium 技巧 记录
1.隐藏全部网络,即隐藏全部的飞线,便于布局,在 PCB 编辑器下,选择工具→连接→显示或隐藏全部网络即可 2.元器件非常多时,模块化布局的小技巧,参考:Altium Designer(DXP)小技巧 ...
- staticmethod classmethod
1. 静态方法 @staticmethod 只是名义上归类管,实际上静态方法里访问不了类或者实例中的任何属性 2. 类方法 @classmethod 只能访问类变量,不能访问实例变量 3.属性方法 @ ...
- Java职业规划
java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来谈 ...
- python新建一个表格xls并写入数据
# -*- coding:utf-8 -*- import xlwt workbook = xlwt.Workbook() # 新建一个工作簿 sheet = workbook.add_sheet(& ...
- 【Linux】管理文件系统
文件系统概念: 文件系统是指文件的组织与管理结构,是一个有关于磁盘中各种有用信息的记录——即是保存以下信息的结构记录表 当前所使用磁盘的容量信息 磁盘的可用信息,包括已占用和剩余的空间: 文件与目录的 ...
- JavaScript日期格式转换
//日期格式转换 function dateFormat(val) {//val需要转换的日期 var fmt = "yyyy-MM-dd";//日期格式 val = val.re ...