<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
span{
color:red;
}
</style>
<script type="text/javascript">
function check(frm)
{
/* \s-- 用户输入的空格 制表符 换行符 空白字符等其中的一个 这些都匹配
* $-- 字符串结束的地方匹配
* /g 全局匹配 也就是,每个地方都匹配
* \w a--z A---Z 之间 0---9之间都匹配
* \d 任意数字 0---9之间的任意数字
*/
var uname=frm.username.value.replace(/(^\s+)|(\s+$)/g,"");
var flag = true;
document.getElementById("unameMsg").innerHTML="";
document.getElementById("pwdMsg").innerHTML="";
document.getElementById("pwdMsg2").innerHTML="";
document.getElementById("ageMsg").innerHTML="";
document.getElementById("phoneMsg").innerHTML="";
document.getElementById("emailMsg").innerHTML="";
//用户名的验证
if(uname.length == 0)
{
document.getElementById("unameMsg").innerHTML="用户名不能为空";
flag = false;
}
else if(uname.length <=5||uname.length >=10)
{
document.getElementById("unameMsg").innerHTML="用户名的长度必须是5-10位"
flag = false;
}
else{
if(!(/^\w+$/.test(uname))){
document.getElementById("unameMsg").innerHTML="用户名格式必须是字母数字下划线";
flag = false;
}
}
//密码的验证
var pwd = frm.pwd.value.replace(/(^\s+)|(\s+$)/g,"");
if(pwd.length == 0)
{
document.getElementById("pwdMsg").innerHTML="密码不能为空";
flag = false;
}
else if(pwd.length <= 5||pwd.length >=15){
document.getElementById("pwdMsg").innerHTML="密码长度必须是5到15位";
flag = false;
}
else{
if(!(/^\w+$/.test(pwd))){
document.getElementById("pwdMsg").innerHTML="密码必须是字母数字下划线";
flag = false;
}
}
//确认密码的验证
var pwd2=frm.pwd2.value.replace(/(^\s+)|(\s+$)/g,"")
if(pwd2.length == 0)
{
document.getElementById("pwdMsg2").innerHTML="确认密码不能为空";
flag = false;
}
else if(pwd2.length <=5||pwd2.length >=15)
{
document.getElementById("pwdMsg2").innerHTML="确认密码的长度必须是5-15位";
flag=false;
}
else {
if(!(/^\w+$/.test(pwd2)))
{
document.getElementById("pwdMsg2").innerHTML="确认密码的格式必须是字母数字下划线";
flag = false;
}
}
//判断2次输入的密码是否正确
if(pwd!=pwd2)
{
document.getElementById("pwdMsg2").innerHTML="两次输入的密码不一致,请重新输入";
flag = false;
}
/*
//验证性别
if(!sex[0].checked && !sex[1].checked)
{
alert("请选择性别");
flag = false;
}
*/
//判断年龄 并且位数介于 1--3位之间
var age = frm.age.value.replace(/(^\s+)|(\s+$)/g,"");
if(age.length == 0)
{
document.getElementById("ageMsg").innerHTML="年龄不能为空!";
flag = false;
}
else if(age < 1||age > 200)
{
document.getElementById("ageMsg").innerHTML="年龄必须是介于1到200之间";
flag = false;
}
else{
if(!(/^([0-9]\d+|[0-9])$/.test(age))){
document.getElementById("ageMsg").innerHTML="年龄不能超过3位数或者不是数字";
flag = false;
}
}
//验证手机电话号码
var phone=frm.phone.value.replace(/(s+)|(s+$)/g,"");
if(phone.length == 0)
{
document.getElementById("phoneMsg").innerHTML="电话号码不能为空";
flag = false;
}
else if((phone < 1 && phone > 11))
{
document.getElementById("phoneMsg").innerHTML="电话号码的长度必须是11位";
flag = false;
}
else {
//注意这里的意思和用户输入的信息是恰好相反的
if(!(/^1[3,5,8]\d{9}$/.test(phone)))
{
document.getElementById("phoneMsg").innerHTML="电话号码的格式是13……,15……,18……组成";
flag = false;
}
}
//验证邮箱
var email=frm.email.value.replace(/(^\s+)|(\s+$)/g,"");
if(email.length == 0)
{
document.getElementById("emailMsg").innerHTML="邮箱不能为空";
flag = false;
}
else if(email.length < 0||email.length >50)
{
document.getElementById("emailMsg").innerHTML="邮箱长度必须是0到50之间";
flag = false;
}
else{
if(!(/^[0-9a-zA-Z]\w+@[0-9a-zA-Z]{2,10}.(com.cn|com|net|cn)$/.test(email)))
{
document.getElementById("emailMsg").innerHTML="邮箱格式必须是标准格式";
flag = false;
}
}
return flag;
}
</script>
</head>
<body>
<form onclick="return check(this)" method="post">
用户名:<input type="text" name="username" /><span id=unameMsg ></span><br/>
密码:<input type="password" name="pwd" /><span id=pwdMsg></span><br/>
确认密码<input type="password" name="pwd2" /><span id=pwdMsg2></span><br/>
年龄:<input type=text name="age" /><span id="ageMsg"></span><br/>
手机号码:<input type="text" name="phone"/><span id="phoneMsg"></span><br/>
邮箱:<input type="text" name="email" /><span id="emailMsg"></span><br/>
<input type="submit" value="注册"/>
<input type="reset" value="取消"/>
</form>
</body>
</html>
分享到:
相关推荐
JavaScript实现表单验证功能 本文实例为大家分享了JavaScript实现表单验证功能的具体代码,供大家参考,具体内容如下 以下是JavaScript的表单验证功能,可根据JS代码编写出你想要的HTML和CSS的代码。 关于正则...
本文实例讲解了javascript实现表单验证的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8...
使用JavaScript进行表单验证是目前通用的做法。本文实现了常见的三种基本的表单区域的验证,并给出了一个循环提示的通用的实例,提出了表单验证的需注意的原则
比较实用的javascript做的表单验证,验证的表单域包括用户名、密码、密码确认、密码提示问题、邮箱、手机号码、身份证。表单域基本通过获得焦点显示提示信息,失去焦点进行验证,还有提交表单验证。提交表单先进行...
基于JavaScript实现简单的表单验证,涉及HTML、css、JavaScript、正则表达式等相关内容
JavaScript表单验证 JavaScript表单验证 JavaScript表单验证
js表单验证实例,HTML文件,javascript常用表单验证: 账号、密码、身份证等
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及...
高级的javascript表单验证, 正则及常用验证 制作带关闭按钮的浮动窗口 制作全选全不选效果效果 DIV提示效果的表单验证
主要特色: 完全响应式; 完美键盘操作支持; 可定制的输入标签:select, radio, checkbox 以及 file; 自定义的日期选择器 本地化支持 表单验证的代码示例:
用正则表达式实现的js表单验证,样式精美,写法独特,带省市级联的效果。
javascript特效 客户端验证javascript特效 客户端验证javascript特效 客户端验证
.net2005完美JavaScript通用表单验证函数,只需要包含此文件就可以实现验证功能.
javaScript表单验证大全javaScript表单验证大全javaScript表单验证大全javaScript表单验证大全
javascript验证表单工具,各种常用表单验证的正则表达式。
javascript 表单验证禁止输入中文汉字
分别用jquery和javaScript实现的图片轮换。tab切换,图片上下滚动,表单验证。
html网页用户注册表单验证校验JavaScript源码代码,完整代码已经打包,还迎下载,代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id...
javascript实现仿京东注册表单,能够实现表单验证,正则匹配,表单验证追踪,随机验证码生成,密码强弱校验等功能。