layui组件代码:layui组件代码: layui.define([ 'jquery','layer'], function (exports) { var $=layui.$; var layer=layui.layer; var config={ verify: { required: [/[\S]+/, "必填项不能为空"], phone: [/^1\d{10}$/, "请输入正确的手机号"], email: [/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0
layui.define([ 'jquery','layer'], function (exports) {
var $=layui.$;
var layer=layui.layer;
var config={
verify: {
required: [/[\S]+/, "必填项不能为空"],
phone: [/^1\d{10}$/, "请输入正确的手机号"],
email: [/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
url: [/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/, "链接格式不正确"],
number: function (e) {
if (!e || isNaN(e)) return "只能填写数字"
},
date: [/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/, "日期格式不正确"],
identity: [/(^\d{15}$)|(^\d{17}(x|X|\d)$)/, "请输入正确的身份证号"]
}
}
var MyValidate={
validate:function(tobj){
var validateListObj= $(tobj).find("*[lay-verify]");
var verifyConfig = config.verify, errClass = "layui-form-danger";
var retStatus=true;
$.each(validateListObj,function(k,v){
var that = $(this),
errMsg= that.attr("lay-reqText")||''
, verifyArr = that.attr("lay-verify").split("|")// 规则数组
, thatVal = that.val();// 当前输入值
that.removeClass('layui-form-danger')
$.each(verifyArr,function(k1,v1){
var isFunction = "function" == typeof verifyConfig[v1];// 判断是否为方法
if(verifyConfig[v1]){// 存在规则
if(isFunction){
var errorMsg = verifyConfig[v1](thatVal);
if(errorMsg){
if(errMsg!=''){
errorMsg=errMsg;
}
layer.msg(errorMsg, {
icon: 5,
shift: 6
})
setTimeout(function () {
v.focus()
}, 7)
that.addClass('layui-form-danger')
retStatus=false;
return false;
}
}else{
var isValidate = verifyConfig[v1][0].test(thatVal);
if(!isValidate){
var errorMsg=verifyConfig[v1][1];
if(errMsg!=''){
errorMsg=errMsg;
}
layer.msg(errorMsg, {
icon: 5,
shift: 6
})
setTimeout(function () {
v.focus()
}, 7)
that.addClass('layui-form-danger')
retStatus=false;
return false;
}
}
}
})
if(!retStatus){
return false;
}
})
return retStatus;
},
getValue(tobj){
var a = {}, n = {}, l = $(tobj).find("input,select,textarea");
return layui.each(l, function (e, t) {
if (t.name = (t.name || "").replace(/^\s*|\s*&/, ""), t.name) {
if (/^.*\[\]$/.test(t.name)) {
var i = t.name.match(/^(.*)\[\]$/g)[0];
a[i] = 0 | a[i], t.name = t.name.replace(/^(.*)\[\]$/, "$1[" + a[i]++ + "]")
}
/^checkbox|radio$/.test(t.type) && !t.checked || (n[t.name] = t.value)
}
}), n
}
}
exports('MyValidate', MyValidate);
})
在项目中引入文件引入路 径为MyValidate文件夹下MyValidate.js文件,MyValidate.js文件具体内容如上
layui.use(['form','MyValidate'], function () {
var form = layui.form,
MyValidate = layui.MyValidate;
})
使用办法:
var item = layui.MyValidate.getValue('#policy-container')
沃梦达教程
本文标题为:layui自定义组件根据id获取id内的form值
基础教程推荐
猜你喜欢
- Vue+WebSocket实现在线聊天 2023-10-08
- 深入浅析Jsonp解决ajax跨域问题 2022-12-28
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01
- 关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- 第7天:CSS入门 2022-11-04
- vue的 Mixins (混入) 2023-10-08
- 分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
- ECSHOP中实现ajax弹窗登录功能 2023-01-31
- 解决ajax的delete、put方法接收不到参数的问题方法 2023-02-23