HTML
CSS
JavaScript
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)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/css/bootstrap.min.css" rel="stylesheet">
<link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
<!--标签插件-->
<link rel="stylesheet" href="http://lyear.itshubao.com/iframe/js/jquery-tags-input/jquery.tagsinput.min.css">
<link href="http://lyear.itshubao.com/iframe/css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid">
  
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header"><h4>表单验证插件 jquery.validate</h4></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="clearfix">
                    <label class="radio-inline">
                      <input type="radio" name="example-sex" value="1">
                      男
                    </label>
                    <label class="radio-inline">
                      <input type="radio" name="example-sex" value="2">
                      女
                    </label>
                    <label class="radio-inline">
                      <input type="radio" name="example-sex" value="3">
                      保密
                    </label>
                  </div>
                </div>
                <div class="form-group">
                  <label>熟悉的开发平台</label>
                  <div class="clearfix">
                    <label class="checkbox-inline">
                      <input type="checkbox" value="1" name="example-lang"> Java EE
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox" value="2" name="example-lang"> Java SE
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox" value="3" name="example-lang"> IOS/Objective-C
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox" value="4" name="example-lang"> Android
                    </label>
                    <label class="checkbox-inline">
                      <input type="checkbox" value="5" name="example-lang"> C/C++
                    </label>
                  </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="clearfix">
                    <label class="lyear-radio radio-inline radio-primary">
                      <input type="radio" name="example-job-status" value="1"><span>在职</span>
                    </label>
                    <label class="lyear-radio radio-inline radio-primary">
                      <input type="radio" name="example-job-status" value="2"><span>学生</span>
                    </label>
                    <label class="lyear-radio radio-inline radio-primary">
                      <input type="radio" name="example-job-status" value="3"><span>找工作中</span>
                    </label>
                  </div>
                </div>
                <div class="form-group">
                  <label>业余爱好</label>
                  <div class="clearfix">
                    <label class="lyear-checkbox checkbox-inline checkbox-primary">
                      <input type="checkbox" name="example-hobby"><span>篮球</span>
                    </label>
                    <label class="lyear-checkbox checkbox-inline checkbox-primary">
                      <input type="checkbox" name="example-hobby"><span>足球</span>
                    </label>
                    <label class="lyear-checkbox checkbox-inline checkbox-primary">
                      <input type="checkbox" name="example-hobby"><span>排球</span>
                    </label>
                  </div>
                </div>
                <div class="form-group">
                  <label>是否开启</label>
                  <div class="clearfix">
                    <label class="lyear-switch switch-primary">
                      <input type="checkbox" name="example-switch">
                      <span></span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="col-xs-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/js/jquery.min.js"></script>
<script src="http://lyear.itshubao.com/iframe/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com//jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com//jquery-validate/messages_zh.min.js"></script>
</body>
</html>
CSS
.lyear-switch input {
    width: auto;
    height: auto;
}
.tagsinput.is-invalid {
    border-color: #f96868
}
JavaScript
$(document).ready(function(){
    // 标签
    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('.help-block').length) {
                return;
            }
            $parent.addClass('has-error');
            $parent.append(error.addClass('help-block'));
        },
        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).parents('.form-group').removeClass('has-error');
        },
        submitHandler: function(form) {
            alert('验证成功');
        }
    });
});