layui 중 단선상자 검사 방법 및 주의사항

14233 단어 layui프런트 엔드

layui에서 단선상자 라디오: 검사 방법 및 주의사항

  • 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) 라디오와 체크박스는 리퀴어의 규칙만 스스로 정의할 수 있으며, 단일 선택 상자 검사 코드와 같다.(2)form.verify는 반드시 form에 두어야 합니다.전에

    좋은 웹페이지 즐겨찾기