代码拉取完成，页面将自动刷新
<!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="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="js/bootstrapvalidator/css/bootstrapValidator.min.css"/>
<!--标签插件-->
<link rel="stylesheet" href="js/jquery-tags-input/jquery.tagsinput.min.css">
<link href="css/style.min.css" rel="stylesheet">
<style>
.has-feedback label~.form-control-feedback {
top: 28px;
}
.has-feedback label.lyear-checkbox~.form-control-feedback,
.has-feedback label.lyear-radio~.form-control-feedback,
.has-feedback label.lyear-switch~.form-control-feedback {
top: 20px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header"><h4>表单验证插件 bootstrap-validate</h4></div>
<div class="card-body">
<form action="#!" method="post" id="example-from" onsubmit="return false;">
<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="radio 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="checkbox 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="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/bootstrapvalidator/js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 标签
if($('.js-tags-input')[0]) {
$('.js-tags-input').tagsInput({
height: '36px',
width: '100%',
defaultText: '添加标签',
removeWithBackspace: true,
delimiter: [',']
});
}
$('#example-from').bootstrapValidator({
excluded: [':disabled'],
message: '该值无效',
feedbackIcons: {
valid: 'mdi mdi-check',
invalid: 'mdi mdi-close',
validating: 'mdi mdi-refresh'
},
fields: {
'example-email': {
validators: {
notEmpty: {
message: '邮箱地址不能为空'
},
emailAddress: {
message: '请输入正确的邮箱地址'
},
/* 使用ajax交互
remote: {
//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: 'exist2.do',//验证地址
message: '邮箱已存在', // 提示消息
delay : 2000, // 每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST' // 请求方式
}
*/
}
},
'example-pwd': {
message: '密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '密码长度必须大于6个字符且小于30个字符'
}
}
},
'example-confirmpwd': {
validators: {
notEmpty: {
message: '确认密码不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '确认密码必须大于6个字符且小于30个字符'
},
identical: {
field: 'example-pwd',
message: '两次输入的密码不相符'
}
}
},
'example-nickname': {
message: '昵称无效',
validators: {
notEmpty: {
message: '昵称不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '昵称长度必须大于2个字符且小于30个字符'
}
}
},
'example-fileload': {
validators: {
notEmpty: {
message: '请选择要上传的文件'
}
}
},
'example-sex': {
validators: {
notEmpty: {
message: '请选择您的性别'
}
}
},
'example-lang': {
validators: {
notEmpty: {
message: '熟悉的开发平台不能为空'
},
choice: {
min: 2,
max: 4,
message: '请选择2-4项'
}
}
},
'example-url': {
validators: {
notEmpty: {
message: '网址不能为空'
},
uri: {
message: '请输入正确的网址'
}
}
},
'example-phone': {
validators: {
notEmpty: {
message: '密码不能为空'
},
regexp: {
regexp: /^1\d{10}$/,
message: '手机号格式错误'
}
}
},
'example-profession': {
validators: {
notEmpty: {
message: '请选择您的职业'
}
}
},
'example-synopsis': {
validators: {
notEmpty: {
message: '简介不能为空'
}
}
},
'example-job-status': {
validators: {
notEmpty: {
message: '请选择您目前的状态'
}
}
},
'example-hobby': {
validators: {
notEmpty: {
message: '请选择您的业余爱好'
}
}
},
'example-switch': {
validators: {
notEmpty: {
message: '请选择是否开启'
}
}
}
}
}).on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
// ... Process the result ...
}, 'json');
});
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。