master

分支 (1)

管理

管理

master

light-year-admin-using-v5-for-example
/
lyear_js_jquery_validate.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>表单验证 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="js/jquery-tags-input/jquery.tagsinput.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
<style>

</style>
</head>

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

  <div class="row">

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

          <p>以往的 <code>form-group</code> 是有样式的，v5中取消了该class，这里使用它只是为了方便验证时候找到div。</p>
  		  <form action="#!" method="post" id="example-from">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group mb-3">
                  <label for="email" class="form-label">邮箱</label>
                  <input type="text" class="form-control" placeholder="正确的邮箱地址" name="example-email" id="email">
                </div>
                <div class="form-group mb-3">
                  <label for="password" class="form-label">密码</label>
                  <input type="password" class="form-control" placeholder="密码" name="example-pwd" id="pwd">
                </div>
                <div class="form-group mb-3">
                  <label for="confirmpwd" class="form-label">确认密码</label>
                  <input type="password" class="form-control" placeholder="确认密码" name="example-confirmpwd" id="confirmpwd">
                </div>
                <div class="form-group mb-3">
                  <label for="nickname" class="form-label">昵称</label>
                  <input type="text" class="form-control" placeholder="昵称" name="example-nickname" id="nickname">
                </div>
                <div class="form-group mb-3">
                  <label for="fileload" class="form-label">上传文件</label>
                  <input type="file" class="form-control" name="example-fileload" id="fileload">
                </div>
                <div class="form-group mb-3">
                  <label for="sex" class="form-label">性别</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 mb-3">
                  <label class="form-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 mb-3">
                  <label for="tags" class="form-label">标签</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 mb-3">
                  <label for="url" class="form-label">网址</label>
                  <input type="text" class="form-control" placeholder="url" name="example-url" id="url">
                </div>
                <div class="form-group mb-3">
                  <label for="phone" class="form-label">手机号码</label>
                  <input type="text" class="form-control" placeholder="" name="example-phone" id="phone">
                </div>
                <div class="form-group mb-3">
                  <label for="profession" class="form-label">你是一名</label>
                    <select class="form-select" 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 mb-3">
                  <label for="synopsis" class="form-label">简介</label>
                  <textarea class="form-control" name="example-synopsis" id="synopsis"></textarea>
                </div>
                <div class="form-group mb-3">
                  <label class="form-label">目前状态</label>
                  <div class="form-controls">
                    <div class="form-check form-check-inline">
                      <input type="radio" class="form-check-input" name="example-job-status" value="1" id="status1">
                      <label class="form-check-label" for="status1">在职</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input type="radio" class="form-check-input" name="example-job-status" value="2" id="status2">
                      <label class="form-check-label" for="status2">学生</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input type="radio" class="form-check-input" name="example-job-status" value="3" id="status3">
                      <label class="form-check-label" for="status3">找工作中</label>
                    </div>
                  </div>
                </div>
                <div class="form-group mb-3">
                  <label class="form-label">业余爱好</label>
                  <div class="form-controls">
                    <div class="form-check form-check-inline">
                      <input type="checkbox" class="form-check-input" name="example-hobby" value="1" id="customCheck1">
                      <label class="form-check-label" for="customCheck1">篮球</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input type="checkbox" class="form-check-input" name="example-hobby" value="2" id="customCheck2">
                      <label class="form-check-label" for="customCheck2">足球</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input type="checkbox" class="form-check-input" name="example-hobby" value="3" id="customCheck3">
                      <label class="form-check-label" for="customCheck3">排球</label>
                    </div>
                  </div>
                </div>
                <div class="form-group mb-3">
                  <label class="form-label">是否开启</label>
                  <div class="form-controls">
                    <div class="form-check form-switch">
                      <input type="checkbox" class="form-check-input" value="1" name="example-switch" id="exampleSwitch1">
                      <label class="form-check-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="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" 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" src="js/main.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.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>