首页 > 代码库 > 表单验证以及下拉框应用
表单验证以及下拉框应用
<!DOCTYPE html>
<html>
<head>
<title>下拉框应用</title>
<style type="text/css">
.container{
width:500px;
margin:0 auto;
border: 1px solid #666;
padding: 10px;
overflow: hidden;
}
.content{
overflow: hidden;
}
.select1,.select2{
height: 200px;
float: left;
width: 34%;
}
.btn{
float: left;
width: 28%;
margin:0 2%;
}
.btn button{
float: left;
margin:10px 0;
}
.high{
color: red;
padding:5px;
vertical-align:text-bottom;
}
.error{
color:red;
}
.ok{
color:green;
}
</style>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.3.1.js"></script>
</head>
<body>
<div class="container">
<form class="contain">
<p><label for="username">登陆账号</label><input type="text" id="username" class="required"></p>
<p><label for="email">登陆邮箱</label><input type="text" id="email" class="required"></p>
<p><label for="holder">主持人名</label><input type="text" id="holder"></p>
<h4 for="vadio">负责频道</h4>
<div class="content">
<select multiple id="select1" class="select1">
<option value="http://www.mamicode.com/频道1">频道1</option>
<option value="http://www.mamicode.com/频道2">频道2</option>
<option value="http://www.mamicode.com/频道3">频道3</option>
<option value="http://www.mamicode.com/频道4">频道4</option>
<option value="http://www.mamicode.com/频道5">频道5</option>
<option value="http://www.mamicode.com/频道6">频道6</option>
</select>
<div class="btn">
<button type="button" class="add">选中添加到右边</button >
<button type="button" class="addAll">全部添加到右边</button >
<button type="button" class="del">选中删除到左边</button >
<button type="button" class="delAll">全部删除到左边</button >
</div>
<select multiple id="select2" class="select2">
</select>
</div>
<p style="margin-top:30px;text-align: center;"><input type="button" id="send" value="http://www.mamicode.com/提交"/></p>
</form>
</div>
<script type="text/javascript">
$(function(){
$("form :input.required").each(function() {
var $required="<strong class=‘high‘>*</strong>";
$(this).after($required);
});
$("form :input").blur(function() {
var $parent=$(this).parent();
$parent.find(".formtip").remove();
if($(this).is(‘#username‘)){
if(this.value =http://www.mamicode.com/="" ||this.value.length < 6){
var errorMsg="请输入至少六位的用户名";
$parent.append("<span class=‘formtip error‘>"+errorMsg+"</span>");
}else{
var okMsg="输入正确";
$parent.append("<span class=‘formtip ok‘>"+okMsg+"</span>");
}
}
//邮箱验证
if($(this).is(‘#email‘)){
if(this.value =http://www.mamicode.com/="" ||this.value !==""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)){
var errorMsg="请输入正确的e-mail地址";
$parent.append("<span class=‘formtip error‘>"+errorMsg+"</span>");
}else{
var okMsg="输入正确";
$parent.append("<span class=‘formtip ok‘>"+okMsg+"</span>");
}
}
}).keyup(function() {// keyup事件在用松开按键的时候触发，实现即时提醒
$(this).triggerHandler("blur");
}).focus(function() {//同理
$(this).triggerHandler("blur");
});
$("#send").click(function() {
$("form .required:input").trigger("blur");//为了使表单提交准确，在提交之前要对表单的必须填写元素进行一次整体的验证。直接用trigger()方法来触发blur()事件，从而达到验证效果
errorlen=$("form .error").length;
if(errorlen){
return false;//如果长度大于0，即false
}else{
alert("注册成功，密码已发到你的邮箱，请收看");
}
});
//多选框
$(".add").click(function() {
var $option=$("#select1 option:selected");
$option.prependTo("#select2");
});
$(".addAll").click(function() {
var $options=$("#select1 option");
$options.prependTo("#select2");
});
$("#select1").dblclick(function() {
var $options=$("option:selected",this);
$options.prependTo(‘#select2‘);
});
$(".del").click(function() {
var $remove=$("#select2 option:selected");
$remove.prependTo("#select1");
});
$(".delAll").click(function() {
var $removeoptions=$("#select2 option");
$removeoptions.prependTo("#select1");
});
})
</script>
</body>
</html>
表单验证以及下拉框应用