Java基本概念-JavaScript表单验证
2017-01-20 14:21
423 查看
一 表单验证的作用
1 减轻服务器的压力
2 提高用户与应用程序的交互性
二 常见的表单验证
1 生日的验证：(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$
2 email验证：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*或者（/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/）
3 身份证验证：\d{15}$|^\d{18}
4 用户名验证：[\u4e00-\u9fa5\w]+（中文字符、英文字母、数字及下划线）
5 年龄验证：15|16|17|18|19|[2-9]\d|100（在15-100之间）
6 验证电话号码：\d{3，4}-)\d{7,8}
7 验证身份证号（15位或18位数字）：\d{15}|\d{18}
8 只能输入由数字和26个英文字母组成的字符串：[A-Za-z0-9]+
9 整数或者小数：[0-9]+\.{0,1}[0-9]{0,2}
10 只能输入数字：[0-9]*$
11 只能输入n位的数字：\d{n}
12 只能输入至少n位的数字：\d{n,}
13 只能输入m~n位的数字：\d{m,n}
14 只能输入零和非零开头的数字：(0|[1-9][0-9]*)
15 只能输入有两位小数的正实数：[0-9]+(.[0-9]{2})?
16 只能输入有1~3位小数的正实数：[0-9]+(.[0-9]{1,3})?
17 只能输入非零的正整数：\+?[1-9][0-9]*$
18 只能输入非零的负整数：\-[1-9][]0-9"*
19 只能输入长度为3的字符：\w{3}
20 只能输入由26个英文字母组成的字符串：[A-Za-z]+
21 只能输入由26个大写英文字母组成的字符串：[A-Z]+
22 只能输入由26个小写英文字母组成的字符串：[a-z]+
23 验证是否含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
24 只能输入汉字：[\u4e00-\u9fa5]{0,}
25 验证URL：http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?
26 验证一年的12个月：(0?[1-9]|1[0-2])
27 验证一个月的31天：((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为；"01"～"09"和"1"～"31"
28 获取日期正则表达式：\d{4}[年|\-|\.]\d{\1-\12}[月|\-|\.]\d{\1-\31}日?
29 匹配双字节字符(包括汉字在内)：[^\x00-\xff]
30 匹配空白行的正则表达式：\n\s*\r
<script type="text/javascript">
//及时验证用户名
function checkuse(){
//在每个函数中定义check变量是为了在表单提交后，能够逐个验证每个函数是否通过，很好很好。（以下同理）
var check;
var username = document.getElementById("username").value;
if (username.length > 18 || username.length < 6) {
alert("用户名输入不合法，请重新输入！");
//此处甚妙，既然你在此处输入错误，那么按理说当然要在此处继续输入了。（在此处继续获取焦点！）
document.getElementById("username").focus();
check = false;
} else {
document.getElementById("checktext1").innerHTML = "* 用户名由6-18位字符组成 √";
check = true;
}
return check;
}
//利用正则表达式判断密码符合否
function checkpwd() {
var check;
var reg = /[^A-Za-z0-9_]+/;
var regs = /^[a-zA-Z0-9_\u4e00-\u9fa5] + $ /;
var password = document.getElementById("password").value;
if (password.length < 6 || password.length > 18 || regs.test(password)) {
alert("密码输入不合法，请重新输入！");
document.getElementById("password").focus();
check = false;
} else {
document.getElementById("checktext2").innerHTML = "* 密码由6-18位字符组成，且必须包含字母、数字和标点符号 √";
check = true;
}
return check;
}
//验证密码是否不一致！
function checkpwdc() {
var check;
var password = document.getElementById("password").value;
var pwdc = document.getElementById("pwdc").value;
if (password != pwdc) {
alert("两次输入密码不一致，请重新输入！");
document.getElementById("pwdc").focus();
check = false;
} else {
document.getElementById("checktext3").innerHTML = "* 请再次输入你的密码 √";
check = true;
}
return check;
}
//提交时验证用户类别
function checkut(){
var check;
if(document.getElementById("selUser").selectedIndex == 0)
{
alert("请选择用户类型！");
document.getElementById("selUser").focus();
check = false;
}else{
document.getElementById("checktext4").innerHTML = "* 请选择用户类型 √";
check = true;
}
return check;
}
//提交时验证用户性别
function checkGender(){
var check;
var gender = "";
//获取所有名称为sex的标签
var sex = document.getElementsByName("sex");
//遍历这些名称为sex的标签
for(var i=0;i<sex.length;++i){
//如果某个sex被选中，则记录
if(sex[i].checked)
gender = sex[i].value;
}
if(gender == "")
{
alert("请选择性别！");
check = false;
}else{
document.getElementById("checktext5").innerHTML = "* 请选择你的性别 √";
check = true;
}
return check;
}
//及时验证出生日期
function checkDate(){
var check;
if(document.getElementById("txtDate").value ==""){
alert("请填写出生日期！");
document.getElementById("txtDate").focus();
check = false;
}else{
document.getElementById("checktext6").innerHTML = "* 请选择你的出生日期 √";
check = true;
}
return check;
}
//及时验证兴趣爱好
function checkHobby(){
var check;
var hobby = 0;
//objNum为所有名称为hobby的input标签
var objNum = document.getElementsByName("hobby");
//遍历所有hobby标签
for(var i=0;i<objNum.length;++i){
//判断某个hobby标签是否被选中
if(objNum[i].checked==true)
hobby++;
}
//如果有选中的hobby标签
if(hobby >=1){
document.getElementById("checktext7").innerHTML = "* 请选择你的兴趣爱好 √";
check = true;
}else{
alert("请填写爱好！");
check = false;
}
return check;
}
//正则表达式验证电子邮件（及时）
function checkemail(){
var check;
//电子邮件的正则表达式
var e1 = document.getElementById("email").value.indexOf("@",0);
var e2 = document.getElementById("email").value.indexOf(".",0);
if(email == "" || (e1==-1 || e2==-1) || e2<e1 )
{
alert("E_mail输入错误!");
document.getElementById("email").focus();
check = false;
} else {
document.getElementById("checktext8").innerHTML = "* 请填写常用的EMAIL，将用于密码找回 √";
check = true;
}
return check;
}
//及时验证自我介绍
function checkintro(){
var check;
var intro = document.getElementById("introduction").value;
if (intro.length > 100) {
alert("字数超限！");
check = false;
} else {
document.getElementById("checktext9").innerHTML = "* 限100字内 √";
document.getElementById("checktext9").focus();
check = true;
}
return check;
}
//提交表单时所有都验证一遍(若任何一个验证不通过，则返回为false，阻止表单提交)
function check() {
var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby()
&& checkemail() &&checkintro();
return check;
}
</script>
<form action="#" method="get" onsubmit="return check()" >
<fieldset>
<legend>
表单及时验证小例子
</legend>
<table align="left" style="background-image: url('img/4.jpg');" >
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username" onchange=" checkuse()" /></td>
<td id="checktext1">* 用户名由6-18位字符组成</td>
</tr>
<!-- onblur 事件处理程序:当元素或窗口失去焦点时触发该事件 -->
<!-- onchange事件处理程序:当表单元素获取焦点，并且内容发生改变时，触发该事件 -->
<!-- 以下同理 -->
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password" onchange="checkpwd()" /></td>
<td id="checktext2">* 密码由6-18位字符组成，且必须包含字母、数字和标点符号</td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="pwdc" id="pwdc" onchange="checkpwdc()" /></td>
<td id="checktext3">* 请再次输入你的密码</td>
</tr>
<tr>
<td>用户类型：</td>
ac33
<td>
<select id="selUser" onblur="checkut()">
<option name="selUser" value="0">请选择</option>
<option name="selUser" value="1">管理员</option>
<option name="selUser" value="2">普通用户</option>
</select>
</td>
<td id="checktext4">* 请选择用户类型</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" value="1" name="sex" onchange="checkGender()"/>男
<input type="radio" value="2" name="sex" onchange="checkGender()"/>女
</td>
<td id="checktext5">* 请选择你的性别</td>
</tr>
<tr>
<td>出生日期：</td>
<td><input type="date" name="date" id="txtDate" onblur="checkDate()"/></td>
<td id="checktext6">* 请选择你的出生日期</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox" name="hobby" value="reading" onchange="checkHobby()">阅读
<input type="checkbox" name="hobby" value="music" onchange="checkHobby()">音乐
<input type="checkbox" name="hobby" value="sports" onchange="checkHobby()">运动
</td>
<td id="checktext7">* 请选择你的兴趣爱好</td>
</tr>
<tr>
<td>电子邮件：</td>
<td><input type="text" name="email" id="email" onchange="checkemail()"/></td>
<td id="checktext8">* 请填写常用的EMAIL，将用于密码找回</td>
</tr>
<tr>
<td>自我介绍：</td>
<td><textarea cols="30" rows="3" name="introduction" id="introduction" onchange="checkintro()">这是自我介绍...</textarea></td>
<td id="checktext9">* 限100字内</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" value="提交" />
<input type="reset" name="reset" value="重置" />
</td>
</tr>
</table>
</fieldset>
</form>
1 减轻服务器的压力
2 提高用户与应用程序的交互性
二 常见的表单验证
1 生日的验证：(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$
2 email验证：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*或者（/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/）
3 身份证验证：\d{15}$|^\d{18}
4 用户名验证：[\u4e00-\u9fa5\w]+（中文字符、英文字母、数字及下划线）
5 年龄验证：15|16|17|18|19|[2-9]\d|100（在15-100之间）
6 验证电话号码：\d{3，4}-)\d{7,8}
7 验证身份证号（15位或18位数字）：\d{15}|\d{18}
8 只能输入由数字和26个英文字母组成的字符串：[A-Za-z0-9]+
9 整数或者小数：[0-9]+\.{0,1}[0-9]{0,2}
10 只能输入数字：[0-9]*$
11 只能输入n位的数字：\d{n}
12 只能输入至少n位的数字：\d{n,}
13 只能输入m~n位的数字：\d{m,n}
14 只能输入零和非零开头的数字：(0|[1-9][0-9]*)
15 只能输入有两位小数的正实数：[0-9]+(.[0-9]{2})?
16 只能输入有1~3位小数的正实数：[0-9]+(.[0-9]{1,3})?
17 只能输入非零的正整数：\+?[1-9][0-9]*$
18 只能输入非零的负整数：\-[1-9][]0-9"*
19 只能输入长度为3的字符：\w{3}
20 只能输入由26个英文字母组成的字符串：[A-Za-z]+
21 只能输入由26个大写英文字母组成的字符串：[A-Z]+
22 只能输入由26个小写英文字母组成的字符串：[a-z]+
23 验证是否含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
24 只能输入汉字：[\u4e00-\u9fa5]{0,}
25 验证URL：http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?
26 验证一年的12个月：(0?[1-9]|1[0-2])
27 验证一个月的31天：((0?[1-9])|((1|2)[0-9])|30|31)$"正确格式为；"01"～"09"和"1"～"31"
28 获取日期正则表达式：\d{4}[年|\-|\.]\d{\1-\12}[月|\-|\.]\d{\1-\31}日?
29 匹配双字节字符(包括汉字在内)：[^\x00-\xff]
30 匹配空白行的正则表达式：\n\s*\r
<script type="text/javascript">
//及时验证用户名
function checkuse(){
//在每个函数中定义check变量是为了在表单提交后，能够逐个验证每个函数是否通过，很好很好。（以下同理）
var check;
var username = document.getElementById("username").value;
if (username.length > 18 || username.length < 6) {
alert("用户名输入不合法，请重新输入！");
//此处甚妙，既然你在此处输入错误，那么按理说当然要在此处继续输入了。（在此处继续获取焦点！）
document.getElementById("username").focus();
check = false;
} else {
document.getElementById("checktext1").innerHTML = "* 用户名由6-18位字符组成 √";
check = true;
}
return check;
}
//利用正则表达式判断密码符合否
function checkpwd() {
var check;
var reg = /[^A-Za-z0-9_]+/;
var regs = /^[a-zA-Z0-9_\u4e00-\u9fa5] + $ /;
var password = document.getElementById("password").value;
if (password.length < 6 || password.length > 18 || regs.test(password)) {
alert("密码输入不合法，请重新输入！");
document.getElementById("password").focus();
check = false;
} else {
document.getElementById("checktext2").innerHTML = "* 密码由6-18位字符组成，且必须包含字母、数字和标点符号 √";
check = true;
}
return check;
}
//验证密码是否不一致！
function checkpwdc() {
var check;
var password = document.getElementById("password").value;
var pwdc = document.getElementById("pwdc").value;
if (password != pwdc) {
alert("两次输入密码不一致，请重新输入！");
document.getElementById("pwdc").focus();
check = false;
} else {
document.getElementById("checktext3").innerHTML = "* 请再次输入你的密码 √";
check = true;
}
return check;
}
//提交时验证用户类别
function checkut(){
var check;
if(document.getElementById("selUser").selectedIndex == 0)
{
alert("请选择用户类型！");
document.getElementById("selUser").focus();
check = false;
}else{
document.getElementById("checktext4").innerHTML = "* 请选择用户类型 √";
check = true;
}
return check;
}
//提交时验证用户性别
function checkGender(){
var check;
var gender = "";
//获取所有名称为sex的标签
var sex = document.getElementsByName("sex");
//遍历这些名称为sex的标签
for(var i=0;i<sex.length;++i){
//如果某个sex被选中，则记录
if(sex[i].checked)
gender = sex[i].value;
}
if(gender == "")
{
alert("请选择性别！");
check = false;
}else{
document.getElementById("checktext5").innerHTML = "* 请选择你的性别 √";
check = true;
}
return check;
}
//及时验证出生日期
function checkDate(){
var check;
if(document.getElementById("txtDate").value ==""){
alert("请填写出生日期！");
document.getElementById("txtDate").focus();
check = false;
}else{
document.getElementById("checktext6").innerHTML = "* 请选择你的出生日期 √";
check = true;
}
return check;
}
//及时验证兴趣爱好
function checkHobby(){
var check;
var hobby = 0;
//objNum为所有名称为hobby的input标签
var objNum = document.getElementsByName("hobby");
//遍历所有hobby标签
for(var i=0;i<objNum.length;++i){
//判断某个hobby标签是否被选中
if(objNum[i].checked==true)
hobby++;
}
//如果有选中的hobby标签
if(hobby >=1){
document.getElementById("checktext7").innerHTML = "* 请选择你的兴趣爱好 √";
check = true;
}else{
alert("请填写爱好！");
check = false;
}
return check;
}
//正则表达式验证电子邮件（及时）
function checkemail(){
var check;
//电子邮件的正则表达式
var e1 = document.getElementById("email").value.indexOf("@",0);
var e2 = document.getElementById("email").value.indexOf(".",0);
if(email == "" || (e1==-1 || e2==-1) || e2<e1 )
{
alert("E_mail输入错误!");
document.getElementById("email").focus();
check = false;
} else {
document.getElementById("checktext8").innerHTML = "* 请填写常用的EMAIL，将用于密码找回 √";
check = true;
}
return check;
}
//及时验证自我介绍
function checkintro(){
var check;
var intro = document.getElementById("introduction").value;
if (intro.length > 100) {
alert("字数超限！");
check = false;
} else {
document.getElementById("checktext9").innerHTML = "* 限100字内 √";
document.getElementById("checktext9").focus();
check = true;
}
return check;
}
//提交表单时所有都验证一遍(若任何一个验证不通过，则返回为false，阻止表单提交)
function check() {
var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby()
&& checkemail() &&checkintro();
return check;
}
</script>
<form action="#" method="get" onsubmit="return check()" >
<fieldset>
<legend>
表单及时验证小例子
</legend>
<table align="left" style="background-image: url('img/4.jpg');" >
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username" onchange=" checkuse()" /></td>
<td id="checktext1">* 用户名由6-18位字符组成</td>
</tr>
<!-- onblur 事件处理程序:当元素或窗口失去焦点时触发该事件 -->
<!-- onchange事件处理程序:当表单元素获取焦点，并且内容发生改变时，触发该事件 -->
<!-- 以下同理 -->
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password" onchange="checkpwd()" /></td>
<td id="checktext2">* 密码由6-18位字符组成，且必须包含字母、数字和标点符号</td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="pwdc" id="pwdc" onchange="checkpwdc()" /></td>
<td id="checktext3">* 请再次输入你的密码</td>
</tr>
<tr>
<td>用户类型：</td>
ac33
<td>
<select id="selUser" onblur="checkut()">
<option name="selUser" value="0">请选择</option>
<option name="selUser" value="1">管理员</option>
<option name="selUser" value="2">普通用户</option>
</select>
</td>
<td id="checktext4">* 请选择用户类型</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" value="1" name="sex" onchange="checkGender()"/>男
<input type="radio" value="2" name="sex" onchange="checkGender()"/>女
</td>
<td id="checktext5">* 请选择你的性别</td>
</tr>
<tr>
<td>出生日期：</td>
<td><input type="date" name="date" id="txtDate" onblur="checkDate()"/></td>
<td id="checktext6">* 请选择你的出生日期</td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox" name="hobby" value="reading" onchange="checkHobby()">阅读
<input type="checkbox" name="hobby" value="music" onchange="checkHobby()">音乐
<input type="checkbox" name="hobby" value="sports" onchange="checkHobby()">运动
</td>
<td id="checktext7">* 请选择你的兴趣爱好</td>
</tr>
<tr>
<td>电子邮件：</td>
<td><input type="text" name="email" id="email" onchange="checkemail()"/></td>
<td id="checktext8">* 请填写常用的EMAIL，将用于密码找回</td>
</tr>
<tr>
<td>自我介绍：</td>
<td><textarea cols="30" rows="3" name="introduction" id="introduction" onchange="checkintro()">这是自我介绍...</textarea></td>
<td id="checktext9">* 限100字内</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" value="提交" />
<input type="reset" name="reset" value="重置" />
</td>
</tr>
</table>
</fieldset>
</form>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Java Web应用中的基本验证和表单验证
- Java表单中关于JavaScript的非空必输验证,你的程序和大牛有多少差距╮(￣▽￣")╭
- 了解URL编码的基本概念，在javascript和java程序中使用内置的API进行编码和解码
- accp6.0 《使用javascript增强交互效果》学习笔记ch6 表单基本验证技术
- 了解URL编码的基本概念，在javascript和java程序中使用内置的API进行编码和解码
- JavaScript表单验证基本用户名验证
- JavaScript验证表单数据，并提交给Java后台
- Java基本概念-JavaScript
- java正则表达式的基本语法以及不同环境的表单验证
- javascript基本的表单验证和正则表单验证
- Java：几个基本概念 IDE/SDK(JDK)/Tomcat/JavaBean/Serverlet/JSP/JavaScript
- JavaScript基本表单验证方法
- JavaScript的表单验证和java中正则表达式
- 学习Java的30个基本概念
- javascript 验证表单 正则表达式
- 学习Java的30个基本概念
- Java的30个基本概念
- java的一些基本概念
- WEB应用中的基本身份验证和表单身份验证
- java之旅 （二）基本概念