boostrap表单验证

来源：互联网发布：英雄无敌3 10.13 mac 编辑：程序博客网时间：2024/05/21 10:31
$('#defaultForm').bootstrapValidator({
// live: 'disabled',
message:'This value is not valid',
feedbackIcons: {
valid:'glyphicon glyphicon-ok',
invalid:'glyphicon glyphicon-remove',
validating:'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
validators: {
notEmpty: {
message:'The first name is required and cannot be empty'
}
}
},
lastName: {
validators: {
notEmpty: {
message:'The last name is required and cannot be empty'
}
}
},
username: {
message:'The username is not valid',
validators: {
notEmpty: {
message:'The username is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message:'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message:'The username can only consist of alphabetical, number, dot and underscore'
},
remote: {
url:'remote.php',
message:'The username is not available'
},
different: {
field:'password',
message:'The username and password cannot be the same as each other'
}
}
},
email: {
validators: {
emailAddress: {
message:'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message:'The password is required and cannot be empty'
},
identical: {
field:'confirmPassword',
message:'The password and its confirm are not the same'
},
different: {
field:'username',
message:'The password cannot be the same as username'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message:'The confirm password is required and cannot be empty'
},
identical: {
field:'password',
message:'The password and its confirm are not the same'
},
different: {
field:'username',
message:'The password cannot be the same as username'
}
}
},
birthday: {
validators: {
date: {
format:'YYYY/MM/DD',
message:'The birthday is not valid'
}
}
},
gender: {
validators: {
notEmpty: {
message:'The gender is required'
}
}
},
'languages[]': {
validators: {
notEmpty: {
message:'Please specify at least one language you can speak'
}
}
},
'programs[]': {
validators: {
choice: {
min: 2,
max: 4,
message:'Please choose 2 - 4 programming languages you are good at'
}
}
},
captcha: {
validators: {
callback: {
message:'Wrong answer',
callback:function(value, validator) {
varitems = $('#captchaOperation').html().split(' '), sum = parseInt(items[]) + parseInt(items[]);
returnvalue == sum;
}
}
}
}
}
});

下面是列子



<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<link rel="icon" href="<%=path%>/favicon.ico"
mce_href="<%=path%>/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="<%=path%>/favicon.ico"
mce_href="<%=path%>/favicon.ico" type="image/x-icon">


<link href="content/Flat-UI-master/dist/css/flat-ui.css"
rel="stylesheet" type="text/css" />
<link href="content/bootstrap-3.3.5-dist/dist/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<link
href="content/bootstrap-3.3.5-dist/dist/css/bootstrapValidator.css"
rel="stylesheet" type="text/css" />
<link href="CSS/hdys_css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="JS/jquery-1.11.1.min.js">

</script>
<script type="text/javascript"
src="content/bootstrap-3.3.5-dist/dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="content/bootstrap-3.3.5-dist/js/bootstrapValidator.js">

</script>
<script type="text/javascript"
src="content/bootstrap-3.3.5-dist/js/language/zh_CN.js">

</script>
<script type="text/javascript" src="JS/hdys.js"></script>


<style type="text/css">
.hdys_main_content_div {
margin: 50px 5% !important;
}
</style>
<script type="text/javascript">
$(document).ready(function() {


$('#register_form').bootstrapValidator({
message : 'This value is not valid',
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
invalid : 'glyphicon glyphicon-remove',
validating : 'glyphicon glyphicon-refresh'
},
fields : {
USER_NAME : {
message : '用户名验证失败',
validators : {
notEmpty : {
message : '用户名不能为空'
},
stringLength : {
min : 5,
max : 18,
message : '用户名长度必须在5到18位之间'
},
regexp : {
regexp : /^[a-zA-Z0-9_]+$/,
message : '用户名只能包含大写、小写、数字和下划线'
}
}
},
USER_EMIAL : {
validators : {
notEmpty : {
message : '邮箱不能为空'
},
emailAddress : {
message : '邮箱地址格式有误'
}
}
},
USER_AGE : {
validators : {
notEmpty : {
message : '年龄不能为空'
},
numeric : {
message : '必须是数字'
}
}
},
/* USER_PNUM : {
validators : {
phone : {
message : '电话格式不正确'
}
}
}, */
USER_PASSWORD : {
validators : {
notEmpty : {
message : '密码不能为空'
},
identical : {
field : 'confirmPassword',
message : '两次密码不一致'
},
different : {
field : 'USER_NAME',
message : '密码不能和用户名相同'
}
}
},
confirmPassword : {
validators : {
notEmpty : {
message : '请再次输入密码'
},
identical : {
field : 'USER_PASSWORD',
message : '两次密码不一致'
},
different : {
field : 'USER_NAME',
message : '密码不能和用户名相同'
}
}
},
}
});
$("#submitBtn").click(function() { //这里触发验证
$('#register_form').bootstrapValidator('validate');
});
$("#back_btn").click(function() {


});
});
</script>
</head>


<body>
<div class="container">
<%@ include file="cut/fixedRight.jsp"%>
<%@ include file="cut/fixedTop.jsp"%>
<%@ include file="cut/header.jsp"%>
<div style="width: 90%; margin: 0px 5%; height: 30px">
<img alt="新用户注册送好礼" width="100%" src="image/registTop.jpg" />
</div>
<div class="hdys_main_content_div">
<%@ include file="cut/leftMenu.jsp"%>
<!-- 注册界面开始 -->
<div>
<div style="width: 50%; height: 462px; float: left;">
<div
style="width: 70%; height: 100%; float: right; padding-left: 50px;">
<div class="left_login">
已是韩都衣舍用户： <a href="login" class="btn btn-success">直接登录</a>
</div>
<div style="height: 20%; width: 100%"></div>
<div class="left_img">
<img alt="韩都衣舍微信" width="100%" height="50%"
src="image/registEwm.png" />
</div>
</div>
</div>
<div class="form row"
style="float: right; width: 50%; border-left: #DDD 1px dashed; padding: 0px 100px 0px 0px; margin: 10px 0xp 0px 0px;">
<form:form class="form-horizontal" modelAttribute="user"
id="register_form" action="addUser" method="post">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<label for="USER_NAME" class="col-sm-3 control-label">名字</label>
<div class="col-sm-9">
<input id="name" class="form-control required col-sm-5"
type="text" placeholder="Username" name="USER_NAME"
autofocus="autofocus" /> <label id="nameerr"
class="login-field-icon" for="login-name"></label>
</div>
</div>
<div class="form-group">
<label for="sex" class="col-sm-3 control-label">性别</label>
<div class="col-sm-9">


<label class="checkbox-inline"> <input id="men"
type="radio" name="USER_SEX" id="optionsRadios3" value="男"
checked>男
</label> <label class="checkbox-inline"> <input id="women"
type="radio" name="USER_SEX" id="optionsRadios4" value="女">女
</label>


</div>


</div>
<div class="form-group">
<label for="age" class="col-sm-3 control-label">年龄</label>
<div class="col-sm-9">
<input id="age" class="form-control required col-sm-5"
type="text" placeholder="UserAge" name="USER_AGE"
autofocus="autofocus" />


</div>
</div>


<div class="form-group">
<label for="pwd" class="col-sm-3 control-label">密码</label>
<div class="col-sm-9">
<input class="form-control required col-sm-5" type="password"
placeholder="Password" id="password" name="USER_PASSWORD" />
</div>
</div>
<div class="form-group">
<label for="checkPwd" class="col-sm-3 control-label">确认密码</label>
<div class="col-sm-9">
<input class="form-control required col-sm-5" type="password"
placeholder="Re-type Your Password" name="rpassword"
id="rpassword" />
</div>
</div>
<div class="form-group">
</i> <label for="email" class="col-sm-3 control-label">邮箱</label>
<div class="col-sm-9">
<input id="email" class="form-control eamil col-sm-5"
type="text" placeholder="Email" name="USER_EMIAL" />
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-3 control-label">电话</label>
<div class="col-sm-9">
<input id="phone" class="form-control required col-sm-5"
type="text" placeholder="userPhone" name="USER_PNUM"
autofocus="autofocus" />


</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-success pull-right margin"
value="注册 " id="submitBtn" />&nbsp; <input type="button"
class="btn btn-info pull-right" id="back_btn" value="返回" />
</div>
</div>
</form:form>
</div>
</div>
<!-- 注册界面结束 -->
</div>




<div class="hdsy_product_list"></div>
<div class="hdsy_foot_div"></div>


</div>
</body>
</html>
阅读全文
0 0