layui中单选框校验方法和注意事项

layui中单选框radio:校验方法和注意事项

  • 1. html部分
  • 2. js部分
  • 3. 重要提示

1. html部分

<div class="layui-form-item">
   <label class="layui-form-label">性别:label>
    <div class="layui-input-block" id="sex">
        <input type="radio" name="Sex" value="man" title="" lay-verify="radioReq">
        <input type="radio" name="Sex" value="woman" title="" lay-verify="radioReq">
    div>
div>

2. js部分

<script type="text/javascript">
        layui.use('form', function () {
     
            var form = layui.form;
            // 表单校验
            form.verify({
     
                radioReq: function (value, item) {
     
                    var verifyName = $(item).attr('name'),
                        verifyType = $(item).attr('type'),
                        formElem = $(item).parents('.layui-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 '必填项不能为空';
                    }
                }
            });
            //监听提交
            form.on('submit(register)', function (data) {
     
                layer.msg(JSON.stringify(data.field)); // 弹出表单数据字段
                console.log(data.field)                
            });
        });
    </script>

3. 重要提示

(1)radio 和 checkbox 只能自行定义require的 规则,单复选择框校验代码一样。
(2)form.verify 一定放在 form.on 之前。

你可能感兴趣的:(layui,前端)