表单验证以及下拉框应用
<!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="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="頻道1">頻道1</option>
<option value="頻道2">頻道2</option>
<option value="頻道3">頻道3</option>
<option value="頻道4">頻道4</option>
<option value="頻道5">頻道5</option>
<option value="頻道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="提交"/></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 == "" ||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 == "" ||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>
轉載于:https://www.cnblogs.com/linjing-blog/p/6696961.html
總結
以上是生活随笔為你收集整理的表单验证以及下拉框应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 去除导航栏的背景色和底部1像素黑色线条o
- 下一篇： jQuery-helloWorld