1 Star 0 Fork 36

马小帅 / Light Year Example

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
test_jquery_validate_v4.html 13.05 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
<!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>
HTML
1
https://gitee.com/weikety/Light-Year-Example.git
git@gitee.com:weikety/Light-Year-Example.git
weikety
Light-Year-Example
Light Year Example
master

搜索帮助

14c37bed 8189591 565d56ea 8189591