JavaWeb-表单及时验证(Jquery)
好吧，作为一个学生党，时间也并不是很宽裕的，紧接着上篇，将Jquery版的表单验证给赶了出来，大家需要的可以看看，有什么问题，也可以跟我交流，共同进步…
界面截图：
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人信息注册title>
<script src="jquery/jquery.js" type="text/javascript">script>
<link rel="stylesheet" href="css/1.css" />
<script type="text/javascript">
$(document).ready(function(){
//使用类选择器，选择class="left"的对象，设置该对象中的字体为12px
$(".left").css({"box-shadow":"inset" });
//使用元素选择器，选择对象，设置这些对象的css样式的边框
$("input").css("border","solid 1px gray");
//使用ID选择器，选择id="message"的对象，设置该对象的CSS样式的边框
$("#message").css("border","dotted 1px gray");
//选择所有的对象
$("*").css("font-size","15px");
//使用("span,legend")选择和
$("span").css("color","black");
//属性选择器，选择name属性值为hobby的复选框，并设置为checked状态
/* $("input[name='hobby']").attr("checked",true); */
var ok1=false;
var ok2=false;
var ok3=false;
var ok4=false;
var ok5=false;
var ok6=false;
var ok7=false;
// 验证用户名
$('input[name="username"]').blur(function(){
if($(this).val().length >= 3 && $(this).val().length <=18 && $(this).val()!=''){
$(this).next().text('OK!').removeClass('state1').addClass('state4');
ok1=true;
}else{
$(this).focus();
$(this).next().text('* 用户名由3-18位字符组成 〤 ').removeClass('state1').addClass('state3');
}
});
//验证密码
$('input[name="password"]').blur(function(){
if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){
$(this).next().text('OK!').removeClass('state1').addClass('state4');
ok2=true;
}else{
$(this).focus();
$(this).next().text('* 密码由6-18位字符组成 〤').removeClass('state1').addClass('state3');
}
});
//验证确认密码
$('input[name="requiredpass"]').blur(function(){
if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){
$(this).next().text('OK!').removeClass('state1').addClass('state4');
ok3=true;
}else{
$(this).focus();
$(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3');
}
});
//验证邮箱
$('input[name="email"]').blur(function(){
if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
$(this).focus();
$(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');
}else{
$(this).next().text('OK!').removeClass('state1').addClass('state4');
ok4=true;
}
});
//提交按钮,所有验证通过方可提交
$('#submit').click(function(){
//验证用户类型1
var items = $("select :selected").val();
if(items == "1"){
$(this).focus();
alert('请选择用户类型！');//弹出提示
}else{
ok5=true;// 返回真值表单提交
}
//验证性别1
if(!$("input[name='gender']").is(":checked")){//如果name为sex的input没有被选中
$(this).focus();
alert('请选择性别！');//弹出提示
}else{
ok6=true;// 返回真值表单提交
}
//验证爱好1
if(!$("input[name='hobby']").is(":checked")){
$(this).focus();
alert('请至少选择一项爱好！');
}else{
ok7=true;
}
if(ok1 && ok2 && ok3 && ok4 && ok5 && ok6 && ok7){
$('myform').submit();
}else{
return false;
}
});
/*
//验证用户类型2
$("#usertype").blur(function(){
var items = $("select :selected").val();
if(items != "1"){
$("#tips_userlx").next().text('OK!');
}
});
$("input:gender").blur(function(){
//验证性别2
if($("input[name='gender']").is(":checked")){//如果name为sex的input被选中
$("#tips_gender").val('OK!');
}
});
$("input[name='hobby']").blur(function(){
//验证爱好2
if($("input[name='hobby']").is(":checked")){
$("#tips_hobby").val('OK!');
}
}); */
});
script>
head>
<body >
<form action="#" method="post" id="myform" >
<div>
<fieldset style="background-image: url('img/4.jpg');">
<legend >个人基本信息legend>
<div >
<label for="usemane" class="left">名称：label>
<input type="text" name="username" id="username"/>
<span id="tips_user">* 用户名由3-18位字符组成span>
div>
<div>
<label for="password" class="left">密码：label>
<input type="password" name="password" id="password"/>
<span id="tips_pass">* 密码由6-18位字符组成span>
div>
<div>
<label for="requiredpass" class="left">确认密码：label>
<input type="password" name="requiredpass" id="requiredpass"/>
<span id="tips_requiredpass">* 请再次输入你的密码span>
div>
<div>
<label for="usemane" class="left">用户类型：label>
<select name="usetype" id="usertype">
<option value="1">请选择option>
<option value="2">管理员option>
<option value="3">普通用户option>
select>
<span id="tips_userlx">* 请选择用户类型span>
div>
<div>
<label for="gender" class="left">性别：label>
<input type="radio" name="gender" id="gender" value="男"/>男
<input type="radio" name="gender" id="gender" value="女"/>女
<span id="tips_gender">* 请选择你的性别span>
div>
<div>
<label for="hobby" class="left">爱好：label>
<input type="checkbox" name="hobby" id="hobby" value="reading"/>阅读
<input type="checkbox" name="hobby" id="hobby" value="music"/>音乐
<input type="checkbox" name="hobby" id="hobby" value="sports"/>运动
<input type="checkbox" name="hobby" id="hobby" value="travell"/>旅行
<span id="tips_hobby">* 请选择你的兴趣爱好span>
div>
<div>
<label for="email" class="left">电子邮件：label>
<input type="text" name="email" id="email"/>
<span id="tips_email">* 请填写常用的EMAIL，将用于密码找回span>
div>
<div>
<label for="message" class="left">自我介绍：label>
<textarea name="message" id="message">textarea>
<span id="tips_message">* 限100字内span>
div>
<div>
<button type="submit" class="submit" id="submit">提交button>
<button type="reset" >重置button>
div>
fieldset>
div>
form>
body>
html>