用户注册表单验证
<%@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>
在每行的p标签下加上span标签id与上面id选择器的id名一致
例如:
<p>
请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
</p>
<span id="email.info" style="color:red"></span>
<span id="EmailMsg"></span>
页面的自动跳转通用
首先在body标签中加入onload事件
例如:
<body onload="delayURL()">
然后:在script标签中编写自动跳转的代码:
例如:
<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>
然后选择显示计时倒数显示的位置
例如:将下面这行代码放入你觉得合适的地方
<h6>
<font color="red">页面将在<span id="time" >3</span>秒后自动跳转回主页</font> <a href="${path}/main/mainBook" title="点击访问">跳过</a>
</h6>
地址回显中的点击事件
- 在select下拉列表标签中加入onchange事件
例如:
<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.然后script中编写事件代码
例如:
扫描二维码关注公众号，回复：
6654564 查看本文章
function change(){
var addId = $("#address").val();
location.href="${path}/address/queryByAddId?addId="+addId;
}
注意:跳转的是根据地址id查询出地址的方法.
表单验证提交不能为空 阻止表单提交
onsubmit属性只在 表单中使用。
onsubmit事件是当表单提交时进行相关JS操作的一个事件。
onsubmit事件会在表单中的确认按钮被点击时发生。当该事件触发的函数中返回false时，表单就不会被提交。
<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>
前端还有很多知识需要补充,留待以后实践持续修改.