一个基于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做的表单验证,验证的表单域包括用户名、密码、密码确认、密码提示问题、邮箱、手机号码、身份证。表单域基本通过获得焦点显示提示信息,失去焦点进行验证,还有提交表单验证。提交表单先进行...
表单验证控件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案例-js表单验证
ajax 表单验证 php 需要自建服务器环境(Xampp)
JavaScript表单验证 JavaScript表单验证 JavaScript表单验证
js表单验证实例,HTML文件,javascript常用表单验证: 账号、密码、身份证等
Javascript的表单验证-提交表单_.docx
基于JavaScript实现简单的表单验证,涉及HTML、css、JavaScript、正则表达式等相关内容
详解JavaScript表单验证(E-mail 验证)_.docx
主要特色: 完全响应式; 完美键盘操作支持; 可定制的输入标签:select, radio, checkbox 以及 file; 自定义的日期选择器 本地化支持 表单验证的代码示例:
高级的javascript表单验证, 正则及常用验证 制作带关闭按钮的浮动窗口 制作全选全不选效果效果 DIV提示效果的表单验证
本文介绍表单验证的高级应用。首先介绍混合表单验证的方法;然后介绍使用onchange直接调用相应的处理程序,对用户输入的内容进行验证的方法;最后,介绍更高级的应用:按键屏蔽,只要用户输入的内容不合要求,则不允许...
使用JavaScript进行表单验证是目前通用的做法。本文实现了常见的三种基本的表单区域的验证,并给出了一个循环提示的通用的实例,提出了表单验证的需注意的原则
javascript特效 客户端验证javascript特效 客户端验证javascript特效 客户端验证
Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 坏数据不该抵达服务器:提交表单时的验证 表单域...
html表单验证及javascript进行表单验证
Javascript的表单验证-提交表单 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 表单提交前要...
.net2005完美JavaScript通用表单验证函数,只需要包含此文件就可以实现验证功能.
javascript 表单验证禁止输入中文汉字
javaScript表单验证大全javaScript表单验证大全javaScript表单验证大全javaScript表单验证大全