表单验证以及下拉框应用

<!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

表单验证以及下拉框应用相关推荐

easyui复杂表单_jQuery EasyUI 表单 – 创建树形下拉框（ComboTree） | 菜鸟教程
jQuery EasyUI 表单 - 创建树形下拉框树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
layui表单单选按钮和下拉框默认选中
单选按钮和下拉框默认选中在使用layui的单选按钮和下拉框时,有时候需要将后台传过来的值使得单选框和下拉菜单默认选中.我的方法是将后台穿过来的值先放在一个隐藏域中,然后再去取值. 1.HTML片 ...
一个大数据量表访问优化--联动下拉框查询优化
问题描述有一数据表(产品标签表,每个产品一个唯一的SN,每月100万左右),查询界面上有2个联动下拉框,[规格]____,[批次]______ 用户选择一个规格后(目前200来个规格),列出该规格下达 ...
PHP获取表单值--同时获取下拉框的Value和Text值
同时获取下拉框的Value和Text值的解决办法: 添加一个<p>标签,用户选中一项后就将该项的Text赋值给他然后接受页面获取该P变迁即可获取到相应的Text值表单填写页面: [ht ...
【Vue】通过Vue操作表单元素（下拉框、选择框）等示例（图文+完整代码）
代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8&q ...
了解elementUI的Form 表单和Dropdown 下拉菜单
Form 表单由输入框.选择器.单选框.多选框等控件组成,用以收集.校验.提交数据 el-form el-form-item el-select el-option <el-form :inl ...
html5表单下拉列表样式,表单的各种下拉和样式大全
指定一个预先定义的输入控件选项列表 datalist:html> 教程注意: Internet Explorer 9(更早 IE 版本),Safari 不支持 datalist 标签. 定义选 ...
js简单表单验证（弹出框）
登录和注册的弹出框的js验证有些字段是不能为空的,那么我们就要通过验证判断:用户是否填写. 此时就要用到js验证. 登录 html <form action="" meth ...
html表单中动态添加下拉框,antd Select下拉菜单动态添加option里的内容操作
antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScop ...

表单验证以及下拉框应用

表单验证以及下拉框应用相关推荐

最新文章

热门文章