`
zfy421
  • 浏览: 233704 次
社区版块
存档分类
最新评论

javascript-表单验证

阅读更多

一个基于javascript的简单表单验证程序,部分细节没有完善。

html部分代码:

<form action="regeist" method="post" id="form1">
    	用户名:<input type="text" name="username" id="username" onblur="checkname()">
    	<br/>
    	密码:<input type="password" name="password" id="password"><br/>
    	确认密码:<input type="password" name="repassword" id="repassword"><br/>
    	邮箱:<input type="text" name="email" id="email"><br/>
    	手机号码:<input type="text" name="mobile" id="mobile"><br/>
    	出生日期:<input type="text" name="birthday" id="birthday"><br/>
    	<input type="button" value="ok" onclick="mysubmit()">
    	<input type="reset" value="reset">
    </form>

 js代码主要使用javascript进行验证,username属性使用jquery进行查询用户名是否存在,这里只是简单的匹配,也可以调用数据库查询。

<script type="text/javascript" src="jquery-1.5.2.js"></script>
    <script type="text/javascript">
    	function mysubmit(){
        	if(check()){
            	alert("mainok");
				document.getElementById("form1").submit();
        	}
        }
        function check(){
        	var username=document.getElementById("username").value;
        	var password=document.getElementById("password").value;
        	var repassword=document.getElementById("repassword").value;
        	var email=document.getElementById("email").value;
        	var mobile=document.getElementById("mobile").value;
        	var birthday=document.getElementById("birthday").value;
        	if(username==null||username==""){
        		alert("用户名不能为空");
        		document.getElementById("username").focus();
        		return false;
            }
			if(username.length<5){
				alert("用户名长度为5-20个字符");
				document.getElementById("username").focus();
				return false;
			}
			if(password==null||password==""){
        		alert("密码不能为空");
        		document.getElementById("password").focus();
        		return false;
            }
            if(password.length<6||password.length>20){
            	alert("密码长度为6-20个字符");
            	document.getElementById("password").focus();
            	return false;
            }
            if(password!=repassword){
                alert("密码不一致");
                document.getElementById("password").focus();
                return false;
            }
            if(email==null||email==""){
                alert("邮箱不能为空");
                document.getElementById("email").focus();
                return false;
            }
            if(email.indexOf("@")==-1){
            	alert("邮箱格式错误");
                document.getElementById("email").focus();
                return false;
            }
            var str=/^1[3|4|5|8][0-9]\d{8}$/;
            if(mobile!=null&&mobile!=""){
	            if(!str.test(mobile)){
	                alert("手机格式错误");
	                document.getElementById("mobile").focus();
	                return false;
	            }
            }
            
			return true;
        }
        function checkname(){
        	var username=document.getElementById("username").value;
        	$.ajax({
				type:"post",
				url:"checkname",
				data:{
					username:username
				},
				success:function(data){
					//alert(data);
					if(data=="true"){
						document.getElementById("username").focus();
						alert("用户存在");
						return false;
					}
				}
			})
        }
    </script>
 public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		String username=request.getParameter("username");
		System.out.println(username);
		if(username.equals("zfy123")){
			out.print("true");
		}else{
			out.print("false");
		}
	}
 
分享到:
评论

相关推荐

    javascript表单验证 正则表达式验证表单

    比较实用的javascript做的表单验证,验证的表单域包括用户名、密码、密码确认、密码提示问题、邮箱、手机号码、身份证。表单域基本通过获得焦点显示提示信息,失去焦点进行验证,还有提交表单验证。提交表单先进行...

    ajax-表单验证

    **压缩包文件中的"ajaxForm"**可能是一个示例项目,包括HTML、JavaScript和PHP文件,用于演示如何实现Ajax表单验证。你可以通过解压文件,运行其中的示例,学习并理解Ajax验证的具体实现。 总之,Ajax表单验证结合...

    表单验证控件commons-validator-1.3.1

    表单验证控件commons-validator-1.3.1表单验证控件commons-validator-1.3.1表单验证控件commons-validator-1.3.1表单验证控件commons-validator-1.3.1表单验证控件commons-validator-1.3.1表单验证控件commons-...

    基于JavaScript的表单验证.zip

    在表单验证中,JavaScript可以通过监听表单的`submit`事件来阻止默认提交行为,然后逐个检查输入字段的值。可以使用`document.getElementById`或`document.querySelector`等方法获取表单元素,再利用`value`属性获取...

    javascript表单验证方式一

    本文将深入探讨"javascript表单验证方式一",介绍如何利用JavaScript进行表单验证,确保用户输入的数据符合预设规则,提高用户体验,同时也减轻了服务器端的压力。 首先,表单验证的基本目标是检查用户在HTML表单中...

    JavaScript案例-js表单验证

    本案例重点聚焦于JavaScript在表单验证中的应用,旨在帮助开发者掌握如何使用纯JavaScript实现有效的用户输入验证,提高用户体验并减少服务器端的压力。 在网页表单中,验证通常是必不可少的步骤,它可以确保用户...

    javascript表单美化和验证插件

    6. **表单验证**:这个插件提供了强大的验证功能,能自动检查用户输入的数据是否符合预设规则,如电子邮件格式、手机号码格式等。通过使用代码示例,开发者可以轻松集成和自定义验证逻辑。 在实际应用中,开发者会...

    使用JavaScript语言进行表单验证

    ### 使用JavaScript语言进行表单验证 #### JavaScript与表单验证的重要性 随着互联网技术的飞速发展,表单作为用户向服务器提交数据的主要方式之一,在现代Web应用中扮演着至关重要的角色。为了确保提交的数据准确...

    javascript特效 表单验证

    一、JavaScript表单验证的重要性 1. 提高用户体验:通过实时验证,用户可以立即得知输入是否有效,无需等待服务器响应,减少了用户的等待时间。 2. 减轻服务器压力:如果所有验证都由服务器完成,会增加不必要的...

    js表单验证实例,HTML文件,javascript常用表单验证

    js表单验证实例,HTML文件,javascript常用表单验证: 账号、密码、身份证等

    详解JavaScript表单验证(E-mail 验证)_.docx

    总的来说,JavaScript表单验证对于提供良好的用户体验和维护数据完整性至关重要,而E-mail验证则是其中的关键部分。通过合理的验证策略,可以有效地减少无效数据的提交,提升网站的安全性和可靠性。

    高级的javascript表单验证

    高级的javascript表单验证, 正则及常用验证 制作带关闭按钮的浮动窗口 制作全选全不选效果效果 DIV提示效果的表单验证

    JavaScript 动态网页实例 - 表单验证高级应用.rar

    本文介绍表单验证的高级应用。首先介绍混合表单验证的方法;然后介绍使用onchange直接调用相应的处理程序,对用户输入的内容进行验证的方法;最后,介绍更高级的应用:按键屏蔽,只要用户输入的内容不合要求,则不允许...

    javascript表单正则验证自定义提示

    "javascript表单正则验证自定义提示"这一主题聚焦于利用正则表达式(Regular Expressions)进行表单验证,并通过自定义提示来优化用户交互。 正则表达式是一种强大的文本处理工具,它可以用来匹配、查找、替换和...

    Javascript的表单验证-提交表单_.docx

    总的来说,JavaScript表单验证在Web应用程序中扮演着至关重要的角色,它确保了数据的质量,提升了用户体验,同时也增强了系统的安全性。理解和熟练掌握这些验证技巧对于任何前端开发者来说都是必不可少的。希望这篇...

    JavaScript程序设计——页面设置与表单验证实验报告.docx

    实验报告的标题“JavaScript程序设计——页面设置与表单验证实验报告.docx”涉及的核心是JavaScript编程中的两个关键领域:页面设置和表单验证。在Web开发中,JavaScript是一种常用的客户端脚本语言,用于增强用户的...

    html表单验证及javascript进行表单验证

    html表单验证及javascript进行表单验证

    javascript表单验证器三方库.zip

    总的来说,"javascript表单验证器三方库.zip" 提供了一个强大的工具,用于处理JavaScript表单验证,它具有可配置性、递归数据验证等特性,是开发高效、健壮的Web应用的重要辅助工具。无论是初学者还是经验丰富的...

    javascript的表单验证

    三、JavaScript表单验证方法 1. DOM操作:使用DOM API获取表单元素,如`document.getElementById`或`document.querySelector`,然后通过`.value`属性获取用户输入。 2. 验证函数:编写验证函数,接收用户输入作为...

    javascript万用表单验证

    JavaScript表单验证可以通过以下几种方式实现: 1. **事件监听**:利用JavaScript的事件监听机制,如`onsubmit`、`onchange`等,可以在用户提交表单或更改输入时立即执行验证函数。 2. **正则表达式**:JavaScript...

Global site tag (gtag.js) - Google Analytics