Jquery EasyUI 验证

EasyUI 自定义验证

//扩展easyui表单的验证

$.extend($.fn.validatebox.defaults.rules, {

//验证汉字

CHS: {

validator: function (value) {

return /^[\u0391-\uFFE5]+$/.test(value);

message: '只能输入汉字'

//移动手机号码验证

mobile: {//value值为文本框中的值

validator: function (value) {

var reg = /^1[3|4|5|8|9]\d{9}$/;

return reg.test(value);

message: '输入手机号码格式不准确.'

//国内邮编验证

zipcode: {

validator: function (value) {

var reg = /^[1-9]\d{5}$/;

return reg.test(value);

message: '邮编必须是非0开始的6位数字.'

//用户账号验证(只能包括 _ 数字字母)

account: {//param的值为[]中值

validator: function (value, param) {

if (value.length < param[0] || value.length > param[1]) {

$.fn.validatebox.defaults.rules.account.message = '用户名长度必须在' + param[0] + '至' + param[1] + '范围';

return false;

} else {

if (!/^[\w]+$/.test(value)) {

$.fn.validatebox.defaults.rules.account.message = '用户名只能数字、字母、下划线组成.';

return false;

} else {

return true;

}

}, message: ''

//wsdl url地址验证

checkWSDL: {

validator: function(value,param){

var reg = "^(http://|([0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}[.]{1}[0-9]{1,3}:[0-9]{1,4}))[/a-zA-Z0-9._%&:=(),?+]*[?]{1}wsdl$";

return reg.test(value);

message: '请输入合法的WSDL地址'

checkIp : {// 验证IP地址

validator : function(value) {

var reg = /^((1?\d?\d|(2([0-4]\d|5[0-5])))\.){3}(1?\d?\d|(2([0-4]\d|5[0-5])))$/ ;

return reg.test(value);

message : 'IP地址格式不正确'

} ,

// 下拉框验证

selectValueRequired: {

validator: function(value,param){

if (value == "" || value.indexOf('请选择') >= 0) {

return false;

}else {

return true;

}

message: '该下拉框为必选项'

} ,

// 判断最小长度

minLength : {

validator : function(value, param) {

return value.length >= param[0];

message : '最少输入 {0} 个字符'

// 长度

length : {

validator : function(value, param) {

var len = $.trim(value).length;

return len >= param[0] && len <= param[1];

message : "输入内容长度必须介于{0}和{1}之间"

phone : {// 验证电话号码

validator : function(value) {

return /^(($\d{2,3}$)|(\d{3}\-))?($0\d{2,3}$|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);

message : '格式不正确,请使用下面格式:020-88888888'

mobile : {// 验证手机号码

validator : function(value) {

return /^(13|15|18)\d{9}$/i.test(value);

message : '手机号码格式不正确'

phoneAndMobile : {// 电话号码或手机号码

validator : function(value) {

return /^(($\d{2,3}$)|(\d{3}\-))?($0\d{2,3}$|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value) || /^(13|15|18)\d{9}$/i.test(value);

message : '电话号码或手机号码格式不正确'

idcard : {// 验证身份证

validator : function(value) {

return /^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value) || /^\d{18}(\d{2}[A-Za-z0-9])?$/i.test(value);

message : '身份证号码格式不正确'

intOrFloat : {// 验证整数或小数

validator : function(value) {

return /^\d+(\.\d+)?$/i.test(value);

message : '请输入数字，并确保格式正确'

currency : {// 验证货币

validator : function(value) {

return /^\d+(\.\d+)?$/i.test(value);

message : '货币格式不正确'

qq : {// 验证QQ,从10000开始

validator : function(value) {

return /^[1-9]\d{4,9}$/i.test(value);

message : 'QQ号码格式不正确'

integer : {// 验证整数

validator : function(value) {

return /^[+]?[1-9]+\d*$/i.test(value);

message : '请输入整数'

chinese : {// 验证中文

validator : function(value) {

return /^[\u0391-\uFFE5]+$/i.test(value);

message : '请输入中文'

chineseAndLength : {// 验证中文及长度

validator : function(value) {

var len = $.trim(value).length;

if (len >= param[0] && len <= param[1]) {

return /^[\u0391-\uFFE5]+$/i.test(value);

}

message : '请输入中文'

english : {// 验证英语

validator : function(value) {

return /^[A-Za-z]+$/i.test(value);

message : '请输入英文'

englishAndLength : {// 验证英语及长度

validator : function(value, param) {

var len = $.trim(value).length;

if (len >= param[0] && len <= param[1]) {

return /^[A-Za-z]+$/i.test(value);

}

message : '请输入英文'

englishUpperCase : {// 验证英语大写

validator : function(value) {

return /^[A-Z]+$/.test(value);

message : '请输入大写英文'

unnormal : {// 验证是否包含空格和非法字符

validator : function(value) {

return /.+/i.test(value);

message : '输入值不能为空和包含其他非法字符'

username : {// 验证用户名

validator : function(value) {

return /^[a-zA-Z][a-zA-Z0-9_]{5,15}$/i.test(value);

message : '用户名不合法（字母开头，允许6-16字节，允许字母数字下划线）'

faxno : {// 验证传真

validator : function(value) {

return /^(($\d{2,3}$)|(\d{3}\-))?($0\d{2,3}$|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value);

message : '传真号码不正确'

zip : {// 验证邮政编码

validator : function(value) {

return /^[1-9]\d{5}$/i.test(value);

message : '邮政编码格式不正确'

ip : {// 验证IP地址

validator : function(value) {

return /d+.d+.d+.d+/i.test(value);

message : 'IP地址格式不正确'

name : {// 验证姓名，可以是中文或英文

validator : function(value) {

return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);

message : '请输入姓名'

engOrChinese : {// 可以是中文或英文

validator : function(value) {

return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);

message : '请输入中文'

engOrChineseAndLength : {// 可以是中文或英文

validator : function(value) {

var len = $.trim(value).length;

if (len >= param[0] && len <= param[1]) {

return /^[\u0391-\uFFE5]+$/i.test(value) | /^\w+[\w\s]+\w+$/i.test(value);

}

message : '请输入中文或英文'

carNo : {

validator : function(value) {

return /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/.test(value);

message : '车牌号码无效（例：粤B12350）'

carenergin : {

validator : function(value) {

return /^[a-zA-Z0-9]{16}$/.test(value);

message : '发动机型号无效(例：FG6H012345654584)'

same : {

validator : function(value, param) {

if ($("#" + param[0]).val() != "" && value != "") {

return $("#" + param[0]).val() == value;

} else {

return true;

}

message : '两次输入的密码不一致!'

}

});

$.extend($.fn.validatebox.methods, {

remove : function(jq, newposition) {

return jq.each(function() {

$(this).removeClass("validatebox-text validatebox-invalid").unbind('focus.validatebox').unbind('blur.validatebox');

// remove tip

// $(this).validatebox('hideTip', this);

});

reduce : function(jq, newposition) {

return jq.each(function() {

var opt = $(this).data().validatebox.options;

$(this).addClass("validatebox-text").validatebox(opt);

// $(this).validatebox('validateTip', this);

});

validateTip : function(jq) {

jq = jq[0];

var opts = $.data(jq, "validatebox").options;

var tip = $.data(jq, "validatebox").tip;

var box = $(jq);

var value = box.val();

function setTipMessage(msg) {

$.data(jq, "validatebox").message = msg;

};

var disabled = box.attr("disabled");

if (disabled == true || disabled == "true") {

return true;

}

if (opts.required) {

if (value == "") {

box.addClass("validatebox-invalid");

setTipMessage(opts.missingMessage);

$(jq).validatebox('showTip', jq);

return false;

}

if (opts.validType) {

var result = /([a-zA-Z_]+)(.*)/.exec(opts.validType);

var rule = opts.rules[result[1]];

if (value && rule) {

var param = eval(result[2]);

if (!rule["validator"](value, param)) {

box.addClass("validatebox-invalid");

var message = rule["message"];

if (param) {

for (var i = 0; i < param.length; i++) {

message = message.replace(new RegExp("\\{" + i + "\\}", "g"), param[i]);

}

setTipMessage(opts.invalidMessage || message);

$(jq).validatebox('showTip', jq);

return false;

}

box.removeClass("validatebox-invalid");

$(jq).validatebox('hideTip', jq);

return true;

showTip : function(jq) {

jq = jq[0];

var box = $(jq);

var msg = $.data(jq, "validatebox").message

var tip = $.data(jq, "validatebox").tip;

if (!tip) {

tip = $("<div class=\"validatebox-tip\">" + "<span class=\"validatebox-tip-content\">" + "</span>" + "<span class=\"validatebox-tip-pointer\">" + "</span>" + "</div>").appendTo("body");

$.data(jq, "validatebox").tip = tip;

}

tip.find(".validatebox-tip-content").html(msg);

tip.css({

display : "block",

left : box.offset().left + box.outerWidth(),

top : box.offset().top

});

hideTip : function(jq) {

jq = jq[0];

var tip = $.data(jq, "validatebox").tip;

if (tip) {

tip.remove;

$.data(jq, "validatebox").tip = null;

}

});

使用方法：

<head>

$(function () {

//设置text需要验证

$('input[type=text]').validatebox();

})

</script>

</head>

<body>

邮箱验证：<input type="text" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br />

网址验证：<input type="text" validtype="url" invalidMessage="url格式不正确[http://www.example.com]" /><br />

长度验证：<input type="text" validtype="length[8,20]" invalidMessage="有效长度8-20" /><br />

手机验证：<input type="text" validtype="mobile" /><br />

邮编验证：<input type="text" validtype="zipcode" /><br />

账号验证：<input type="text" validtype="account[8,20]" /><br />

汉子验证：<input type="text" validtype="CHS" /><br />

远程验证：<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用户名已存在"/>

下拉框验证：<select id="serviceType" name="serviceType" style="width: 150px" class="easyui-combobox" required="true" validType="selectValueRequired"></select>

</body>

</html>

Remote：远程验证

equalTo : {

validator : function(value, param) {

return $("#" + param[0]).val() == value;

message : '两次输入的密码不一致!'

checkPassword :{

validator : function(value,param){

var sysUser = {};

var flag ;

sysUser.userPassword = value;

$.ajax({

url : root + 'login/checkPwd.do',

type : 'POST',

timeout : 60000,

data:sysUser,

async: false,

success : function(data, textStatus, jqXHR) {

if (data == "0") {

flag = true;

}else{

flag = false;

}

});

if(flag){

$("#userPassword").removeClass('validatebox-invalid');

}

return flag;

message: '原始密码输入错误！'

}

以上基本包括了EasyUI中的大部分验证信息，方便自己查询。

Jquery EasyUI 验证

继续阅读

jquery瀑布流插件-在线demo预览

JavaScript（运算符、逻辑结构、循环）——笔记整理0512一、js里边的运算符二、js里边的逻辑结构三、js里边的循环四、js里边逻辑结构和循环的应用

leetcode电话号码的字母组合

javascript使用ZeroClipboard组件复制内容到剪切板

css超链接之新闻列表

2018年不想被web前端开发淘汰，你需要掌握哪些技术？

如何才能学好Web前端技术？

初学web前端开发需要掌握什么

前端开发技术汇总

如何正确的去学习web前端开发？

Jeecg-Boot 2.4.0版部署后无法加载验证码问题Provisional headers are shown Failed to load response data

springMvc如何和前端页面交互，传输json数据springMvc和前端传输数据

聊一聊Swagger-UI的那些事情软件简介Swagger 原生Bootstrap-ui Bootstrap的UIKnife4j Bootstrap的升级版的UI

javascript console对象解读

JavaScript的那些坑之事件代理事件代理事件阶段

jquery_126_demo