`

[code]表单验证_1.用js在客户端验证

阅读更多
1.用js在客户端验证

goodsPublish.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%   
    String path = request.getContextPath();   
    String basePath = request.getScheme() + "://"  
            + request.getServerName() + ":" + request.getServerPort()   
            + path + "/";   
%> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>发布商品</title>

<link rel="stylesheet" type="text/css" href="<%=basePath%>css/mobile.css">

<script language="javascript" type="text/javascript">
var xmlHttp;    
// 创建xmlHttp;    
function createXMLHttpRequest(){    
    if(window.ActiveXObject){    
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    
    }else if(window.XMLHttpRequest){    
        xmlHttp = new XMLHttpRequest();    
    }    
}    
   
// 删除城市选项    
function clearType2List(){    
    var type2 = document.getElementById("type2");    
    while(type2.childNodes.length > 0){    
        type2.removeChild(type2.childNodes[0]);    
    }    
}    
   
//选项省份时    
function selectType1(){    
    var type1 = document.getElementById("type1").value;//获取省份值    
    //alert(type1);  
    if(type1 == ""){ //如果为空,则清空城市选项    
        clearType2List();    
        clearType3List();
        
        var type2Select = document.getElementById("type2"); //获取城市select组件    
        var option = document.createElement("option");    
        option.appendChild(document.createTextNode("请选择分类2"));    
        type2Select.appendChild(option);
           
        
        
        return ; //返回    
    }    
   
	//不乱码3
	//type1 = escape(escape(type1)); 
	url="<%=basePath%>servlet/GetTypebyId?parentid=" + type1 + "&id="+Math.random(); 
	//alert(url);
	createXMLHttpRequest();
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
	//不乱码3
}    
   
//回调函数    
function handleStateChange(){    
    if(xmlHttp.readyState == 4){    
        if(xmlHttp.status == 200){    
            updateType2List();    
        }    
    }    
}    
   
//页面更新城市集合函数    
function updateType2List(){    
    clearType2List();//首先删除先前的城市选项    
    var type2Select = document.getElementById("type2"); //获取城市select组件    
    var results = xmlHttp.responseXML.getElementsByTagName("type");//获取Ajax返回的结果,city为返回的XML里的节点       
    var option = document.createElement("option");    
    option.appendChild(document.createTextNode("请选择分类2"));    
    type2Select.appendChild(option);
    
    for(var i=0; i<results.length; i++){            
        option = document.createElement("option");  
        option.setAttribute("value",results[i].getAttribute("value")); 
        option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));    
        type2Select.appendChild(option);    
    }  
    //alert(type2Select.childNodes[0].getAttribute("value"));
    //查看值是否正确
}     

/////////////

// 删除城市选项    
function clearType3List(){    
    var type3 = document.getElementById("type3");    
    while(type3.childNodes.length > 0){    
        type3.removeChild(type3.childNodes[0]);    
    }    
}    
   
//选项省份时    
function selectType2(){    
    var type2 = document.getElementById("type2").value;//获取省份值    
    //alert(type1);  
    if(type2 == ""){ //如果为空,则清空城市选项    
        clearType3List();    
        var type3Select = document.getElementById("type3"); //获取城市select组件    
        var option = document.createElement("option");    
        option.appendChild(document.createTextNode("请选择分类3"));    
        type3Select.appendChild(option);    
        return ; //返回    
    }    
   
	//不乱码3
	//type1 = escape(escape(type1)); 
	url="<%=basePath%>servlet/GetTypebyId?parentid=" + type2 + "&id="+Math.random(); 
	//alert(url);
	createXMLHttpRequest();
	xmlHttp.onreadystatechange = handleStateChange2;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
	//不乱码3
}    
   
//回调函数    
function handleStateChange2(){    
    if(xmlHttp.readyState == 4){    
        if(xmlHttp.status == 200){    
            updateType3List();    
        }    
    }    
}    
   
//页面更新城市集合函数    
function updateType3List(){    
    clearType3List();//首先删除先前的城市选项    
    var type3Select = document.getElementById("type3"); //获取城市select组件    
    var results = xmlHttp.responseXML.getElementsByTagName("type");//获取Ajax返回的结果,city为返回的XML里的节点    
    var option = null;    
    for(var i=0; i<results.length; i++){            
        option = document.createElement("option");  
        option.setAttribute("value",results[i].getAttribute("value")); 
        option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));    
        type3Select.appendChild(option);    
    }  
    //alert(type2Select.childNodes[0].getAttribute("value"));
    //查看值是否正确
}          
      
</script>  


<script language="javascript" type="text/javascript">

 //验证非空函数
 function checkNull(str,element)
 {
 	if(element.value==""){
      alert(str+"不能为空");
      element.focus();
      return false;
    }
    return true;
 }
 
 //验证长度函数
 function checkLength(str,num,element)
 {
    if(element.value.length>=num)
    {
       alert(str+"长度不能超过"+num+"位");
       element.focus();
       return false;
    }
    return true;
 }
 
 //验证非法字符函数
 function checkFeiFa(str,element)
 {
    
    var ve =/[@#\$%\^&\*]+/g;  //@#$%^&*这些字符为非法
    if(ve.test(element.value)){
     element.focus();
     alert(str+"含有非法字符@#$%^&*!");
      return false;
    }
    return true;
 }
 
 //验证为整数函数
 function checkInt(str,element)
 {
 	var ve= /^[1-9][0-9]*$/;
 	 if(!ve.test(element.value)){
     element.focus();
     alert(str+"必须为整数!");
      return false;
    }
    return true;
 }
 
 //验证价格函数
 function checkPrice(str,element)
 {
     var re = /^[1-9][0-9]*$|^[0-9].[0-9]+$/;
     if(!re.test(element.value)){
     element.focus();
     alert(str+"格式出错!");
      return false;
    }
    return true;
 }
 
 //验证为图片格式.jpg,.gif,.bmp格式
 function checkPic(element)
 {
  	 if(element.value.toLowerCase().indexOf(".jpg")<0&&element.value.toLowerCase().indexOf(".gif")<0&&element.value.toLowerCase().indexOf(".bmp")<0){
      alert("只能上传.jpg,.gif,.bmp格式的图片!");
      return false;
    }
    return true;
 }
 
 //验证标题
 function checkTitle(str,num,element)
 {
   if(!checkNull(str,element))
   {
   return false;
   }
   if(!checkLength(str,num,element))
   {
   return false;
   }
   if(!checkFeiFa(str,element))
   {
   return false;
   }
   return true;
 }
 
 //验证商品数量
 function checkGoodsnum(str,num,element)
 {
    if(!checkNull(str,element))
    {
    return false;
    }
    if(!checkInt(str,element))
    {
    return false;
    }
    if(!checkLength(str,num,element))
    {
    return false;
    }
    return true;
 }
 
 //验证价格
 function checkEms(str,element)
 {
 	if(!checkPrice(str,element))
    {
    return false;
    }
    return true;
 }
 
 //验证图片
 function checkImage(str,element)
 {
 	if(!checkNull(str,element))
    {
    return false;
    }
    if(!checkPic(element))
    {
    return false;
    }
    return true;
 }
 
 //被调用的验证函数
 function check(){
    var title = document.getElementById("title");
    var price = document.getElementById("price"); 
    var goodsnum = document.getElementById("goodsnum");
    var image = document.getElementById("image");
    var ems = document.getElementById("ems");
    var py = document.getElementById("py");
    var kd = document.getElementById("kd");
      
   
    if(!checkTitle("商品名称",20,title))
    {
    return false;
    }
    if(!checkGoodsnum("商品数量",7,goodsnum))
    {
    return false;
    }
    if(!checkEms("价格格式",ems))
    {
    return false;
    }
    if(!checkImage("图片",image))
    {
    return false;
    }
    return true;
      
  }
  </script>
</head>

 

<body>

	<jsp:include page="/include/headm.jsp" flush="true" />
	
	<div id="container">
		
		<jsp:include page="/include/leftm.jsp" flush="true" />
		
		<div id="rightside" >
			
			<div class="margin5 border1">
			<form id="form1" name="form1" enctype="multipart/form-data" method="post" action="<%=basePath%>servlet/GoodsPublish" onsubmit="return check();">
			  <input type="hidden" name="shopid" value="<%=request.getParameter("shopid")%>" />
			  <label for="title">商品名称:</label>
			  <input type="text" name="title" id="title" />
			  <br/>
			  <label for="info">商品简介:</label>
			  <input type="text" name="info" id="info" />
			  <br/>
			  <label for="price">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格:</label>
			  <input type="text" name="price" id="price" />
			  <br/>
			  <label for="ems">配送价格:</label>
			  <input type="text" name="ems" id="ems" />
			  <br/>
			  <label for="py">平邮价格:</label>
			  <input type="text" name="py" id="py" />
			  <br/>
			  <label for="kd">快递价格:</label>
			  <input type="text" name="kd" id="kd" />
			  <br/>
			  <label for="goodsnum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数量:</label>
			  <input type="text" name="goodsnum" id="goodsnum" />
			  <br/>
			  <label for="goodsnum">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;图片:</label>
			  <input type="file" name="image" id="image" />
			  <br/>
			  
			   <label for="type1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分类1:</label>
			   <select name="type1" id="type1" onchange="selectType1();">
			    <option>请选择分类1</option>
				<c:forEach items="${sessionScope['type1list']}" var="item">
				<option value="<c:out value="${item.id}"/>"><c:out value="${item.name}"/></option>
				</c:forEach>
				</select>
			   <label for="type2">分类2:</label>
				  <select name="type2" id="type2" onchange="selectType2();">
				    <option>请选择分类2</option>
				  </select>
			   <label for="type3">分类3:</label>
			   	  <select name="type3" id="type3">
				    <option>请选择分类3</option>
				  </select>
			  <br/>
			  <label for="Submit"></label>
			  <input type="submit" name="Submit" value="提交" id="Submit" />
			  <label for="label"></label>
			  <input type="reset" name="Reset" value="重置" id="label" />
			  <br/>
			</form>
			</div>
			
		</div>
		
	</div>
	
	<jsp:include page="/include/footm.jsp" flush="true" />
	
	
</body>
</html>


1.不能为空
2.长度不超过20位
3.含非法字符@#$%^&*
4.必须是整数
5.价格格式
6.图片限制格式

regedit.jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%   
    String path = request.getContextPath();   
    String basePath = request.getScheme() + "://"  
            + request.getServerName() + ":" + request.getServerPort()   
            + path + "/";   
%> 
<%
response.setHeader("Pragma", "No-cache"); 
response.setDateHeader("Expires", 0); 
response.setHeader("Cache-Control", "no-cache");
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册页面</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
<!--
body {
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
}
form{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color:#666666;
}
-->
</style>
<style type="text/css">
.code{
background-image:url(image/code.jpg);
font-family:Arial;
font-style:italic;
color:Red;
border:0;
padding:2px 3px;
letter-spacing:3px;
font-weight:bolder;
}
.unchanged {
border:0;
}
</style>
<link rel="stylesheet" type="text/css" href="css/mobile.css">


<script language="javascript" type="text/javascript">


  //不含中文
  function checkNoCn(str,element)
  {
    var re = /.*[\u4e00-\u9fa5]+.*$/;
    if(re.test(element.value)) 
		{ 
		alert(str+"不能含有中文!"); 
		element.focus();
		return false; 
		} 
	return true;
  }
  
  //长度范围num1>num2
  function checkLengths(num1,num2,str,element)
  {
  	if(element.value.length>=num1 || element.value.length<num2)
  	{
      alert(str+"长度出错");
      element.focus();
      return false;
    }
    return true;
  }
  
  //两次密码是否相同
  function checkSame(str,element1,element2)
  {
  	if(element1.value!=element2.value)
  	{
  		alert("两次"+str+"不相同");
  		element2.focus();
  		return false;
  	}
  	return true;
  }
  
  //手机 13X,158,159,11位的
  function checkMobile(element)
  {
    var re = /^13\d{9}|15[8,9]\d{8}$/g;
  	if(!re.test(element.value))
  	{
     	 alert("手机号码输入有误!");
         return false;
    }
    return true;
  }
  
  //邮箱  X@X.com
  function checkEmail(element)
  {
  	var re = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
  	if(!re.test(element.value)) 
	{ 
	alert("邮箱格式不正确!"); 
	element.focus();
	return false; 
	} 
	return true;
  }
  
  //用户名
  function checkUsername(num1,num2,str,element)
  {
  	if(!checkNoCn(str,element))
  	{
  	return false;
  	}
  	if(!checkLengths(num1,num2,str,element))
  	{
  	return false;
  	}
  	return true;
  	
  }
  
  //密码
  function checkPassword2(str,element1,element2)
  {
  	if(!checkSame(str,element1,element2))
  	{
  		return false;
  	}
  	return true;
  }
  
  //手机
  function checkMob(element)
  {
  	if(!checkMobile(element))
  	{
  	return false;
  	}
  	return true;
  }
  
  
  function check(){
    var username = document.getElementById("username");
    var password = document.getElementById("password"); 
    var password2 = document.getElementById("password2");
    var mob = document.getElementById("mob");
     var email = document.getElementById("email");
    var certificate = document.getElementById("certificate");
     var person = document.getElementById("person");
    var telno = document.getElementById("telno");
    var address = document.getElementById("address");
    var postno = document.getElementById("postno");
      
   // var inputCode = document.getElementById("input1").value.toUpperCase();
     
    if(!checkUsername(20,5,"用户名",username))
    {
    	return false;
    }
    if(!checkPassword2("密码",password,password2))
    {
    	return false;
    }
    if(!checkMob(mob))
    {
    	return false;
    }
    if(!checkEmail(email))   //邮箱
    {
    	return false;
    }
    
    return true;
     
  }
  </script>

</head>
<body >

	<jsp:include page="include/head.jsp" flush="true" />
	
	<div id="container">
		
		<div>
<form id="form1" name="form1" method="post" action="servlet/RegeditServlet" onsubmit="return check();">
  <label for="username"> 用户名:</label>
  <input type="text" name="username" id="username" />* 5-20位字母、数字或字符组合<span class="STYLE1" style="color: red" id="result"></span>
  <br/>
  <label for="password" >  密码:</label>
  <input type="password" name="password" id="password" size="22"/>* 6-20位字母、数字或字符组合
  <br/>
  <label for="password2">重复密码:</label>
  <input type="password" name="password2" id="password2" size="22"/>*
  <br/>
  <label for="mob">注册手机:</label>
  <input type="text" name="mob" id="mob" />
  <br/>
  <label for="email">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;E-mail:</label>
  <input type="text" name="email" id="email" />
  <br/>
  <label for="certificatetype">证件类型:</label>
  <select name="certificatetype" id="certificatetype">
    <option value="身份证">身份证</option>
    <option value="车官证">车官证</option>
    <option value="工商证">工商证</option>
  </select>
  <br/>
  <label for="certificate">&nbsp;&nbsp;&nbsp;&nbsp;证件号:</label>
  <input type="text" name="certificate" id="certificate" />
  <br/>
  <label for="person">&nbsp;&nbsp;&nbsp;&nbsp;联系人:</label>
  <input type="text" name="person" id="person" />
  <br/>
  <label for="sex">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;性别:</label>
  <select name="sex" id="sex">
    <option value="1">男</option>
    <option value="0">女</option>
  </select>
  <br/>
  <label for="telno">联系电话:</label>
  <input type="text" name="telno" id="telno" />
  <br/>
  <label for="address">联系地址:</label>
  <input type="text" name="address" id="address" />
  <br/>
  <label for="postno">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮编:</label>
  <input type="text" name="postno" id="postno" />
  <br/>
  <label for="checkno">&nbsp;&nbsp;&nbsp;&nbsp;验证码:</label>
		  <input type="text" name="input1" id="input1" maxlength="4"/>*
		  <input type="text" id="checkCode" class="code" style="width: 55px" readonly="readonly"/> <a href="#" onclick="createCode()">看不清楚</a>
 <br/>
  <input id="choose" type="checkbox" class="radio" checked="checked" />我已阅读并同意<a href="viewAdvice.jsp"
							target="_blank">《XXX通用户协议》</a>
  <br/>						
  <label for="Submit"></label>
  <input type="submit" name="Submit" value="注册" id="Submit" />
  <label for="label"></label>
  <input type="reset" name="Reset" value="重置" id="label" />
  <br/>
</form>
</div>
</div>

	<jsp:include page="include/foot.jsp" flush="true" />
	
</body>
</html>


1.不能含中文
2.长度范围
3.两次密码不相同
4.手机号码格式
5.邮箱格式
分享到:
评论

相关推荐

    表单验证Validator v1.0(CHM) 下载

    表单的验证一直是网页设计者头痛的问题,表单验证类 Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上。 Validator是基于JavaScript...

    大名鼎鼎SWFUpload- Flash+JS 上传

     在SWFUpload的使用过程中,无论在客户端还是服务器端都要和File Object打交道,在一个File Object中包含了以下内容:  {  id : string, // SWFUpload file id, used for starting or cancelling and upload  ...

    在b/s开发中经常用到的javaScript技术整理

    在b/s开发中经常用到的javaScript技术整理 一、验证类 1、数字验证内 1.1 整数 1.2 大于0的整数 (用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iMax 1.5 整数不能小于iMin 2、时间类 ...

    ASP.NET4高级程序设计(第4版) 3/3

    14.9.1 把DataSet转换为XML 514 14.9.2 把DataSet作为XML访问 515 14.10 总结 517 第三部分 构建ASP.NET网站 第15章 用户控件 520 15.1 用户控件基础 520 15.1.1 创建简单的用户控件 521 15.1.2 把...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    14.9.1 把DataSet转换为XML 14.9.2 把DataSet作为XML访问 14.10 总结 第三部分 构建ASP.NET网站 第15章 用户控件 15.1 用户控件基础 15.1.1 创建简单的用户控件 15.1.2 把页面转换成用户控件 15.2 ...

    JSP避免Form重复提交的三种方案

    这种方法是使用 JavaScript 在提交表单时禁用提交按钮或图片,以防止用户重复提交。 &lt;html:form action="myAction.do" method="post" onsubmit="getElById('submitInput').disabled = true; return true;"&gt; ...

    react-pkce:使用PKCE流程对React进行OAuth2身份验证

    这个零依赖包使应用程序可以使用OAuth2提供程序进行身份验证。 OAuth2提供程序必须支持 。 (TODO:指向解释为什么这样做是一个好主意/比使用隐式流程更好的资源的链接。) 查看()。 当提示您登录时,您可以...

    SmsCode:UI 验证和单元测试的 AngularJS 演示

    客户端验证只允许输入数字和 6 位代码。 以 json 格式提交表单 POSTs 数据 {code: } 服务器返回带有错误的 json 提要,例如 { errorcode : 901, error: 'invalid code' } UI 已更新以反映错误。 Karma 和 Mocha ...

    【ASP.NET编程知识】总结ASP.NET C#中经常用到的13个JS脚本代码.docx

    JavaScript(JS)是ASP.NET中常用的脚本语言之一,用于实现客户端的交互操作。本文将总结ASP.NET C#中经常用到的13个JS脚本代码,旨在帮助开发者快速掌握JS脚本的应用。 一、按钮前后台事件 在ASP.NET中,按钮的...

    Algorithm-CouponCode:Perl库,用于生成和验证“ CouponCode”字符串

    每个部分的第4个字符是一个校验位,因此,在将代码提交给应用程序的后端验证之前,客户端脚本可用于突出显示键入错误的部分。 校验码算法考虑了被键控零件的位置。 因此,例如“ 1K7Q”可能在第一部分中有效,但

    JAVA上百实例源码以及开源项目源代码

    得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥验证签名结果,使用公钥初始化签名对象,用于...

    JAVA上百实例源码以及开源项目

    得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥验证签名结果,使用公钥初始化签名对象,用于...

    ASP.NET.4揭秘

    2.3.4 button控件使用客户端脚本68 2.3.5 执行跨页面发送70 2.3.6 指定默认按钮73 2.3.7 处理command事件74 2.4 显示图像77 2.4.1 使用image控件77 2.4.2 使用imagemap控件78 2.5 使用panel控件82 2.6 使用hyperlink...

    ASP.NET 控件的使用

    2.3.4 Button控件使用客户端脚本 62 2.3.5 执行跨页面发送 64 2.3.6 指定默认按钮 67 2.3.7 处理Command事件 68 2.4 显示图像 70 2.4.1 使用Image控件 70 2.4.2 使用ImageMap控件 71 2.5 使用Panel控件 75 2.6 使用...

    forms:Wakanda表格验证

    Wakanda的客户端表单验证 例子 // init form var myForm = new Forms ( [ { field : 'textEmail' , type : 'email' } , { field : 'textPassword' , type : 'password' } , { field : 'textPasswordConfirm' , ...

    asp.net知识库

    使用.ashx文件处理IHttpHandler实现发送文本及二进制数据的方法 制作一个简单的多页Tab功能 一完美的关于请求的目录不存在而需要url重写的解决方案! 在C#中实现MSN消息框的功能 XmlHttp实现无刷新三联动ListBox 鼠标...

Global site tag (gtag.js) - Google Analytics