Layui的少许心得---- 2.页面自定义单选框或复选框的必选判定

页面代码：

<div class="layui-inline">
	<label class="layui-form-label">是否做为宿主软件</label>
		<div class="layui-input-inline" id="label">
			<input type="radio" lay-filter="label" lay-verify="otherReq" name="label" 						
				value="1" title="是">
			<input type="radio" lay-filter="label" lay-verify="otherReq" name="label" 
				value="0" title="否">
		</div>
</div>
<div id="hostSoftCode_div" class="layui-inline">
	<label class="layui-form-label">宿主软件</label>
		<div class="layui-input-inline">
			<select name="hostSoftCode" xm-select="hostSoftCode" id="hostSoftCode"
                     xm-select-skin="default" xm-select-search="" xm-select-radio>
				<option value="">请选择宿主软件</option>
			</select>
	</div>
</div>
<div id="hostHardCode_div" class="layui-inline" >
	<label class="layui-form-label">宿主服务器</label>
		<div class="layui-input-inline">
			<select name="hostHardCode" xm-select="hostHardCode" id="hostHardCode"
                     xm-select-skin="default" xm-select-search="" xm-select-radio>
				<option value="">请选择服务器</option>
			</select>
	</div>
</div>

这是一个页面的单选框，在没有添加 checked 的前提下是无值的。

js代码：

<script type="text/javascript">
	layui.use(['view', 'laydate', 'form'], function () {
        var form = layui.form;
        var $ = layui.$;

		form.on('radio(label)', function (data) {
            // console.log(data.elem); //得到radio原始DOM对象
            // console.log(data.value); //被点击的radio的value值
            if (data.value == 1) {
                $("#hostSoftCode_div").attr('style', 'display:none');
                $("#hostHardCode_div").attr('style', '');
            }
            if (data.value == 0){
                $("#hostHardCode_div").attr('style', 'display:none');
                $("#hostSoftCode_div").attr('style', '');
            }
        });
        
		form.verify({
			otherReq: function(value,item){
			var $ = layui.$;
			var verifyName=$(item).attr('name')
				, verifyType=$(item).attr('type')
				,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 '必填项不能为空';
			}
		}
	});
});
</script>

在通过自定义的判定之后，单选框就必选，且会根据选中的值进行页面动态加载；