layui layui redio 验证

      发布在:前端技术      评论:0 条评论

layui layui redio 表单提交验证,在使用layui自带的required验证没有效果,于是想到了自定义的方式具体代码如下:

<div class="layui-form-item">
   <div class="required f17 gray">2、您的最高学历?<span class="hint">&nbsp;(单选)</span></div>
   <div>
       <input type="radio" name="xueli" value="大专" title="大专" lay-verify="isrequired"
              lay-reqText="请您选择您的最高学历">
       <input type="radio" name="xueli" value="本科" title="本科" lay-verify="isrequired"
              lay-reqText="请您选择您的最高学历">
       <input type="radio" name="xueli" value="研究生及以上" title="研究生及以上" lay-verify="isrequired"
              lay-reqText="请您选择您的最高学历">
   </div>
</div>
//自定义验证规则
form.verify({
ischinese: function (value) {
if (!/^[\u4e00-\u9fa5]+$/.test(value)) {
return '只能输入中文';
       }
}, isrequired: function (value, item) {
//解决radio无法校验问题
       var verifyName = $(item).attr('name')
, verifyType = $(item).attr('type')
, reqText = $(item).attr('lay-reqText')
, formElem = $(item).parents('.layui-form')//获取当前所在的form元素,如果存在的话
           , verifyElem = formElem.find('input[name=' + verifyName + ']')//获取需要校验的元素
           , isTrue = verifyElem.is(':checked')//是否命中校验
           , focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
       if (!isTrue || !value) {
//定位焦点
           focusElem.css(verifyType == 'radio' ? {"color": "#FF5722"} : {"border-color": "#FF5722"});
           //对非输入框设置焦点
           focusElem.first().attr("tabIndex", "1").css("outline", "0").blur(function () {
focusElem.css(verifyType == 'radio' ? {"color": ""} : {"border-color": ""});
           }).focus();
           return reqText ? reqText : '必填项必须选择';
       }

}
});


相关文章

首先添加样式类.table-header-fixed { top: 0; position: fixed; z-index: 999;}在table表格渲染完后,增加js代码如下var headerTop = $('.layui-table-header').offset().top; //获取表格头到文档顶部的距离$(window).scroll(functio

在数据表格上,操作按钮太多的时候,页面展示不全,下拉显示所有按钮时,点击无效。需要在js中添加代码,放在layui.use()里面即可。$(document).off('mousedown', '.layui-table-grid-down') .on('mousedown', '.layui-table-grid-down&#

layuimini后台点击右侧菜单实现重新加载页面

`layui-disabled` 类和 `readonly` 属性都是用来禁用表单元素的,但是它们的作用有所不同。`layui-disabled` 类是 layui 自定义的禁用样式类,它可以禁用表单...

在Layui中,可以使用表单验证组件来实现身份证验证的功能。主要步骤如下:1. 在HTML页面中引入Layui的表单验证组件:2. 在HTML页面中添加一个表单,并给需要验证的输入框添加相应的属性和值...

Layui模块citypicker城市选择器没有找到手册,看代码发现了如下代码:CityPicker.DEFAULTS = { simple: false, responsive: tru...

热门推荐