首页 > 代码库 > jQuery基础知识--Form基础(续)
jQuery基础知识--Form基础(续)
下拉框应用
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script> <title></title> <style type="text/css"> * { margin:0; padding:0; } div.centent { float:left; text-align: center; margin: 10px; } span { display:block; margin:2px 2px; padding:4px 10px; background:#898989; cursor:pointer; font-size:12px; color:white; } </style></head><body><div class="centent"> <select multiple id="select1" style="width: 100px; height: 160px;"> <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> <option value="7">选项7</option> <option value="8">选项8</option> </select> <div> <span id="add">选中添加到右边>></span> <span id="add_all">全部添加到右边>></span> </div></div><div class="centent"> <select multiple id="select2" style="width: 100px; height: 160px;"> </select> <div> <span id="remove"><<选中删除到左边</span> <span id="remove_all"><<全部删除到左边</span> </div></div></body><script type="text/javascript"> $(function () { $("#add").click(function () {// //方法1// var $options = $(‘#select1 option:selected‘);// var $remove = $options.remove();// $remove.appendTo(‘#select2‘); //方法2 var $options = $(‘#select1 option:selected‘); $options.appendTo(‘#select2‘); }); $("#add_all").click(function () { var $options = $("#select1 option"); $options.appendTo("#select2"); }); $("#select1").dblclick(function () { var $options = $(‘#select1 option:selected‘); $options.appendTo(‘#select2‘); }); $("#remove").click(function () { var $options = $("#select2 option:selected"); $options.appendTo("#select1"); }); $("#remove_all").click(function () { var $options = $("#select2 option"); $options.appendTo("#select1"); }); $("#select2").dblclick(function () { var $options = $("#select2 option:selected"); $options.appendTo("#select1"); }); })</script></html>
表单验证
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script> <title></title> <link href="css/style.css" rel="stylesheet" type="text/css" /></head><body><form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="required" /> </div> <div class="int"> <label for="email">邮箱:</label> <input type="text" id="email" class="required" /> </div> <div class="int"> <label for="personinfo">个人资料:</label> <input type="text" id="personinfo" /> </div> <div class="sub"> <input type="submit" value="提交" id="send" /><input type="reset" id="res" /> </div></form></body><script type="text/javascript"> $(function () { //添加必填标识 $("form :input.required").each(function () { $(this).parent().append("<strong class=‘high‘>*</strong>"); }); //当输入框失去焦点时进行验证 $("form :input").blur(function () { var $parent = $(this).parent(); $parent.find(".formtips").remove(); //验证username if($(this).is("#username")) { if(this.value == "" || this.value.length < 6) { var errorMsg = "请输入至少6位的用户名."; $parent.append("<span class=‘formtips one rror‘>" + errorMsg + "</span>") } else { var okMsg = "输入正确"; $parent.append("<span class=‘formtips onSuccess‘>" + okMsg + "</span>") } } //验证email 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=‘formtips one rror‘>" + errorMsg + "</span>") } else { var okMsg = "输入正确"; $parent.append("<span class=‘formtips onSuccess‘>" + okMsg + "</span>") } } }).keyup(function () {//实时提醒 $(this).triggerHandler("blur"); }).focus(function () { $(this).triggerHandler("blur"); }); //提交--没有错误才能提交 $("#send").click(function () { $("form .required:input").trigger("blur"); var numErr = $("form .onError").length; if(numErr) { return false; } alert("注册成功!"); }); })</script></html>
jQuery基础知识--Form基础(续)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。