Light-Year-Example
/
test_jquery_validate_v4.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>表单验证 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个基于Bootstrap v4.4.1的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/v4/css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<!--标签插件-->
<link rel="stylesheet" href="js/jquery-tags-input/jquery.tagsinput.min.css">
<link href="http://lyear.itshubao.com/iframe/v4/css/style.min.css" rel="stylesheet">
<style>
.lyear-switch input {
    width: auto;
    height: auto;
}
.tagsinput.is-invalid {
    border-color: #f96868
}
</style>
</head>

<body>
<div class="container-fluid">

  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header"><div class="card-title">表单验证插件 jquery.validate</div></div>
        <div class="card-body">

          <form action="#!" method="post" id="example-from">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="email">邮箱</label>
                  <input type="text" class="form-control" placeholder="正确的邮箱地址" name="example-email" id="email">
                </div>
                <div class="form-group">
                  <label for="password">密码</label>
                  <input type="password" class="form-control" placeholder="密码" name="example-pwd" id="pwd">
                </div>
                <div class="form-group">
                  <label for="confirmpwd">确认密码</label>
                  <input type="password" class="form-control" placeholder="确认密码" name="example-confirmpwd" id="confirmpwd">
                </div>
                <div class="form-group">
                  <label for="nickname">昵称</label>
                  <input type="text" class="form-control" placeholder="昵称" name="example-nickname" id="nickname">
                </div>
                <div class="form-group">
                  <label for="fileload">上传文件</label>
                  <input type="file" class="form-control" name="example-fileload" id="fileload">
                </div>
                <div class="form-group">
                  <label for="sex">性别</label>
                  <div class="form-controls">
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="example-sex" value="1" id="sex1">
                      <label class="form-check-label" for="sex1">男</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="example-sex" value="2" id="sex2">
                      <label class="form-check-label" for="sex2">女</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="example-sex" value="3" id="sex3">
                      <label class="form-check-label" for="sex3">保密</label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label>熟悉的开发平台</label>
                  <div class="form-controls">
                    <div class="form-check form-check-inline">
                      <input type="checkbox" class="form-check-input" value="1" name="example-lang" id="lang1">
                      <label class="form-check-label" for="lang1">Java EE</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input type="checkbox" class="form-check-input" value="2" name="example-lang" id="lang2">
                      <label class="form-check-label" for="lang2">Java SE</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input type="checkbox" class="form-check-input" value="3" name="example-lang" id="lang3">
                      <label class="form-check-label" for="lang3">IOS/Objective-C</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input type="checkbox" class="form-check-input" value="4" name="example-lang" id="lang4">
                      <label class="form-check-label" for="lang4">Android</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input type="checkbox" class="form-check-input" value="5" name="example-lang" id="lang5">
                      <label class="form-check-label" for="lang5">C/C++</label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label for="tags">标签</label>
                  <input type="text" class="form-control js-tags-input" name="example-tags" placeholder="请输入标签" value="" id="tags">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="url">网址</label>
                  <input type="text" class="form-control" placeholder="url" name="example-url" id="url">
                </div>
                <div class="form-group">
                  <label for="phone">手机号码</label>
                  <input type="text" class="form-control" placeholder="" name="example-phone" id="phone">
                </div>
                <div class="form-group">
                  <label for="profession">你是一名</label>
                    <select class="form-control" name="example-profession" id="example-profession">
                    <option value>请选择</option>
                    <option value="1">平面设计</option>
                    <option value="2">程序员</option>
                    <option value="3">前端工程师</option>
                    <option value="4">产品经理</option>
                  </select>
                </div>
                <div class="form-group">
                  <label for="synopsis">简介</label>
                  <textarea class="form-control" name="example-synopsis" id="synopsis"></textarea>
                </div>
                <div class="form-group">
                  <label>目前状态</label>
                  <div class="form-controls">
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" name="example-job-status" value="1" id="status1">
                      <label class="custom-control-label" for="status1">在职</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" name="example-job-status" value="2" id="status2">
                      <label class="custom-control-label" for="status2">学生</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" class="custom-control-input" name="example-job-status" value="3" id="status3">
                      <label class="custom-control-label" for="status3">找工作中</label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label>业余爱好</label>
                  <div class="form-controls">
                    <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" class="custom-control-input" name="example-hobby" value="1" id="customCheck1">
                      <label class="custom-control-label" for="customCheck1">篮球</label>
                    </div>
                    <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" class="custom-control-input" name="example-hobby" value="2" id="customCheck2">
                      <label class="custom-control-label" for="customCheck2">足球</label>
                    </div>
                    <div class="custom-control custom-checkbox custom-control-inline">
                      <input type="checkbox" class="custom-control-input" name="example-hobby" value="3" id="customCheck3">
                      <label class="custom-control-label" for="customCheck3">排球</label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label>是否开启</label>
                  <div class="form-controls">
                    <div class="custom-control custom-switch">
                      <input type="checkbox" class="custom-control-input" value="1" name="example-switch" id="exampleSwitch1">
                      <label class="custom-control-label" for="exampleSwitch1"></label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <button type="submit" class="btn btn-primary">确认提交</button>
              </div>
            </div>
          </form>

        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="http://lyear.itshubao.com/iframe/v4/js/jquery.min.js"></script>
<script src="js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery-validate/messages_zh.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // 标签
    var test;
    if($('.js-tags-input')[0]) {
        $('.js-tags-input').tagsInput({
            height: '36px',
            width: '100%',
            defaultText: '添加标签',
            removeWithBackspace: true,
            delimiter: [',']
        });
    }

    $.validator.addMethod('phone_format', function(value, element) {
        return this.optional(element) || /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(value);
    }, '手机号码格式错误');
    $('#example-from').validate({
        ignore: ".ignore",    // 插件默认不验证隐藏元素,这里可以自定义一个不验证的class,即验证隐藏元素,不验证class为.ignore的元素
        focusInvalid: false,  // 禁用无效元素的聚焦
        rules: {
            'example-email': {
                required: true,
                email: true
            },
            'example-pwd': {
                required: true,
                minlength: 6,
                maxlength: 20
            },
            'example-confirmpwd': {
                required: true,
                minlength: 6,
                equalTo: 'input[name="example-pwd"]'
            },
            'example-nickname': {
                required: true
            },
            'example-url': {
                required: true,
                url: true
            },
            'example-phone': {
                required: true,
                phone_format: true
            },
            'example-sex': {
                required: true
            },
            'example-lang': {
                required: true
            },
            'example-fileload': {
                required: true
            },
            'example-switch': {
                required: true
            },
            'example-hobby': {
                required: true
            },
            'example-job-status': {
                required: true
            },
            'example-profession': {
                required: true
            },
            'example-synopsis': {
                required: true
            },
            'example-tags': {
                required: true
            },
        },
        errorPlacement: function errorPlacement(error, element) {
            var $parent = $(element).parents('.form-group');
            if ($parent.find('.invalid-feedback').length) {
                return;
            }
            $(element).addClass('is-invalid');
            $parent.append(error.addClass('invalid-feedback'));
        },
        highlight: function(element) {
            var $el = $(element);
            if ($el.hasClass('js-tags-input')) {
                $el.next('.tagsinput').addClass('is-invalid');  // tags插件所隐藏的输入框没法实时验证，比较尴尬
            }
        },
        unhighlight: function(element) {
            $(element).next('.tagsinput').removeClass('is-invalid');
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            alert('验证成功');
        }
    });
});
</script>
</body>
</html>