User Registration Form Validation
<%@page contentType="text/html;charset=utf-8" isELIgnored="false" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="/struts-tags" prefix="s"%>
<c:set var="path" value="${pageContext.request.contextPath}" scope="page" />
//点击更新验证码
function changeImage(){
$("#imgVcode").attr("src","${path}/admin/getImageCode?"+new Date().getTime());
}
$(function(){
//邮箱验证
$("#txtEmail").blur(function(){
//$("#name").val().length
var Email = $(this).val();
if(Email== ""){
$("#EmailMsg").html("<b><font color='red'>邮箱不能为空~~!</font><b/>");
}else{
var regEmail = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
if(regEmail.test(Email)){
$("#EmailMsg").html("<b><font color='green'>邮箱验证通过~~!</font><b/>");
ok1=true;
}else{
$("#EmailMsg").html("<b><font color='red'>邮箱格式不正确~~!</font><b/>");
}
}
});
//昵称验证
$("#txtNickName").blur(function(){
var NickName = $(this).val();
if(NickName== ""){
$("#NickNameMsg").html("<b><font color='red'>昵称不能为空~~!</font><b/>");
}else{
if(NickName.length<3 || NickName.length>20){
$("#NickNameMsg").html("<b><font color='red'>昵称格式不正确~~!</font><b/>");
}else{
$("#NickNameMsg").html("<b><font color='green'>昵称验证通过~~!</font><b/>");
ok2=true;
}
}
});
//密码验证
$("#txtPassword").blur(function(){
var Password = $(this).val();
if(Password== ""){
$("#PasswordMsg").html("<b><font color='red'>密码不能为空~~!</font><b/>");
}else{
if(Password.length<6 || Password.length>20){
$("#PasswordMsg").html("<b><font color='red'>密码格式不正确~~!</font><b/>");
}else{
$("#PasswordMsg").html("<b><font color='green'>密码验证通过~~!</font><b/>");
ok3=true;
}
}
});
//确认密码验证
$("#txtRepeatPass").blur(function(){
var passwprd = $("#txtPassword").val();
//alert(passwprd);
var RepeatPass = $(this).val();
if(RepeatPass== ""){
$("#RepeatPassMsg").html("<b><font color='red'>不能为空~~!</font><b/>");
}else{
if(RepeatPass == passwprd){
$("#RepeatPassMsg").html("<b><font color='green'>密码验证通过~~!</font><b/>");
ok4=true;
}else{
$("#RepeatPassMsg").html("<b><font color='red'>密码不一致~~!</font><b/>");
}
}
});
//验证码验证
$("#txtVerifyCode").blur(function(){
var Password = $(this).val();
if(Password== ""){
$("#vcodeValidMsg").html("<b><font color='red'>密码不能为空~~!</font><b/>");
}else{
if(Password.length<4 || Password.length>4){
$("#vcodeValidMsg").html("<b><font color='red'>密码格式不正确~~!</font><b/>");
}else{
$("#vcodeValidMsg").html("<b><font color='green'>密码验证通过~~!</font><b/>");
ok5=true;
}
}
});
//提交按钮验证
$("form").submit(function(){
//首先执行需要把blur方法执行一遍，这样显示的错误信息 然后记录错误信息的长度 只要长度大于0就阻止提交
$("input").trigger("blur");
//提交按钮,所有验证通过方可提交
if(ok1 && ok2 && ok3 && ok4 && ok5){
$('form').submit();
}else{
return false;
}
});
});
</script>
plus span is consistent with the id id id selector above at each p row label
E.g:
<p>
请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
</p>
<span id="email.info" style="color:red"></span>
<span id="EmailMsg"></span>
General pages automatically jump
First to join in the body tag onload event
E.g:
<body onload="delayURL()">
Then: write code automatically jump in the script tag:
E.g:
<script type="text/javascript">
function delayURL() {
var delay = document.getElementById("time").innerHTML;
var t = setTimeout("delayURL()", 1000);
if (delay > 0) {
delay--;
document.getElementById("time").innerHTML = delay;
} else {
clearTimeout(t);
window.location.href = "${path}/main/mainBook";
}
}
</script>
Then choose where to display the countdown timer
For example: The following line of code into the appropriate place you think
<h6>
<font color="red">页面将在<span id="time" >3</span>秒后自动跳转回主页</font> <a href="${path}/main/mainBook" title="点击访问">跳过</a>
</h6>
Address back to the click event of significant
- Join onchange event in the drop-down list select tag
E.g:
<p>
选择地址：
<select id="address" onchange="change()" >
<option value="0">
填写新地址
</option>
<c:forEach items="${list}" var="l">
<option value="${l.id}" <c:if test="${addId==l.id}">selected</c:if> >${l.name}</option>
</c:forEach>
</select>
</p>
2. Then write a script event code
E.g:
function change(){
var addId = $("#address").val();
location.href="${path}/address/queryByAddId?addId="+addId;
}
Note: The jump is method to query the address of the address id.
Form validation submission can not be empty preventing form submission
onsubmit attribute is only used in the form.
onsubmit event is an event related to JS operation when the form is submitted.
onsubmit event occurs when a form confirmation button is clicked. When the function of the event triggered returns false, the form will not be submitted.
<script type="text/javascript">
function check(){//function check(f)对应下面程序中的this。f代表表单信息
//var e = f.email.value;
var e = document.myform.email.value;//可以直接用document获取表单指定内容
//document.write(e);
if(!/^\w+@\w+.\w+$/.test(e)){//JS中正则表达式的test方法用来验证是否与该正则表达式匹配，匹配就返回true，不匹配就返回false
alert("输入格式不正确");
f.email.focus();//将焦点定位到email框
f.email.select();//选中框内全部内容
return false;
}
return true;
}
</script>
form action="" method="post" name="myform" onsubmit="return check()"
<!--<form action="" method="post" name="myform" onsubmit="return check(this)">this就表示该表单-->
EMAIL:input type="text" name="email"
input type="submit" value="提交"
/form>
前端还有很多知识需要补充,留待以后实践持续修改.