您的位置：首页 > Web前端 > JavaScript

JavaScript用于表单验证（1）

2013-09-03 23:59 92 查看
本人是JS初学者，今天调试了一段JS表单验证代码，感觉收获颇多，第一次写博客，算是做个小小的纪念哈


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
<!--验证邮政编码格式的函数-->
function validateZipCode1(inputFormElement,helpTextElement){
<!--查看输入的邮编是不是6个数字-->
if((inputFormElement.value.length==6) && (!isNaN(inputFormElement.value))){
if(helpTextElement!=null){
helpTextElement.innerHTML='输入正确';
}
return true;
}
else{
if(helpTextElement!=null){
helpTextElement.innerHTML='输入错误（提示：邮编应为6位数字）';
}
return false;
}
}

function validateZipCode2(inputField,helpText){
<!--类似的用input.value.length==0可以验证其他input输入框的输入是否为空-->
if(inputField.value.length!=6){
if(helpText!=null){
helpText.innerHTML="邮编长度应为6";
}
return false;
}
else if(isNaN(inputField.value)){
if(helpText!=null){
helpText.innerHTML="邮编应为数字";
}
return false;
}
else{
if(helpText!=null){
helpText.innerHTML="输入正确";
}
return true;
}
}

<!--用户即便输入了错误格式信息依然有可能想服务器提交，所以还需要进行最后一步验证-->
<!--validateForm函数要求传入一个form对象以检验其中包含的表单域-->
<!--从此处form["zipcode"],form["zipcode_help_msg"]可以看出表单中的表单输入域也是对象-->
function validateForm(form){
<!--validateZipCode函数的返回值在此处发挥了很大的作用，为表单输入域子验证函数添加返回值是个好做法-->
if(validateZipCode1(form["zipcode"],form["zipcode_help_text"]) && validateDate(form["date"],form["date_help_text"])){
alert('填写成功');
form.submit();<!--如果所有子表单输入域验证成功则调用form对象的submit方法将数据提交至服务器-->
}
else{
alert('表单数据填写有误');
}
}

<!--创建一个全功能的正则表达式验证工具函数,再根据实际验证需求‘封装’到具体的表单输入域验证函数中去-->
function validateRegExprr1(regExprr,inputStr,helpText,helpMsg1,helpMsg2){
if(!regExprr.test(inputStr)){         <!--var regExprr=/....../,RegExp正则表达式对象自动创建-->
if(helpText!=null){
helpText.innerHTML=helpMsg1;
}
return false;
}
else{
if(helpText!=null){
helpText.innerHTML=helpMsg2;
}
}
}

function validateRegExprr2(regExprr,inputField,helpText,helpMsg1,helpMsg2){
if(!regExprr.test(inputField.value)){
if(helpText!=null){
helpText.innerHTML=helpMsg1;
}
return false;
}
else{
if(helpText!=null){
helpText.innerHTML=helpMsg2;
}
return true;
}
}

<!--日期输入格式提示函数-->
function inputHelpDate(inputHelpText){
if(inputHelpText!=null){
inputHelpText.innerHTML='日期格式为：20/01/2010或20/01/10'
}
}

<!--日期格式验证函数-->
function validateDate(inputField,helpText){
return validateRegExprr2(/^\d{2}\/\d{2}\/(\d{2}|\d{4})$/,inputField,helpText,'日期格式错误，应为：20/03/2013或20/03/13','格式正确');
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js用于表单数据验证</title>
</head>

<body>
<form action="a.php" method="get">
<!--onblur用于在对应的input输入框失去焦点时触发-->
<!--this用于表示当前输入框对象，document.getElementById('');用于关联该输入框对应的帮助信息-->
邮政编码：<input id="zipcode" name="zipcode" type="text" size="6" alt="邮政编码" onblur="validateZipCode1(this,document.getElementById('zipcode_help_text'));" />
<!--将输入框帮助信息help_msg归类，以便在css中统一帮助信息的样式-->
<span id="zipcode_help_text" class="help_text"></span><br />
日期：<input id="date" name="date" type="text" size="6" alt="日期" onfocus="inputHelpDate(document.getElementById('date_help_text'));" onblur="validateDate(this,document.getElementById('date_help_text'));" />
<span id="date_help_text" class="help_text"></span><br />
<!--即便出现错误帮助信息提示，用户还是有可能将包含错误数据的表单提交至服务器，所以还需要进行提交前数据检验的处理-->
<!--通过this当前input框对象可以访问其所在form对象-->
<!--使用validateForm函数将普通表单按钮做出js版的submit按钮-->
<input type="button" value="提交数据" onclick="validateForm(this.form);" />
</form>
</body>
</html>







                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航