本篇使用Dialog 构造一个比较实用的对话框，它可以内嵌一个表单用来接受用户输入，每个输入框支持数据校验，部分使用正则表达式来检验。




​​1​​

​​<!doctype html>​​


​​2​​

​​<​​​​html​​ ​​lang​​​​=​​​​"en"​​​​>​​


​​3​​

​​<​​​​head​​​​>​​


​​4​​

​​<​​​​meta​​ ​​charset​​​​=​​​​"utf-8"​​ ​​/>​​


​​5​​

​​<​​​​title​​​​>jQuery UI Demos</​​​​title​​​​>​​


​​6​​

​​<​​​​link​​ ​​rel​​​​=​​​​"stylesheet"​​ ​​href​​​​=​​​​"themes/trontastic/jquery-ui.css"​​ ​​/>​​


​​7​​

​​<​​​​script​​ ​​src​​​​=​​​​"scripts/jquery-1.9.1.js"​​​​></​​​​script​​​​>​​


​​8​​

​​<​​​​script​​ ​​src​​​​=​​​​"scripts/jquery-ui-1.10.1.custom.js"​​​​></​​​​script​​​​>​​


​​9​​

​​<​​​​style​​​​>​​


​​10​​

​​body {​​


​​11​​

​​font-size: 62.5%;​​


​​12​​

​​}​​


​​13​​

 


​​14​​

​​label, input {​​


​​15​​

​​display: block;​​


​​16​​

​​}​​


​​17​​

 


​​18​​

​​input.text {​​


​​19​​

​​margin-bottom: 12px;​​


​​20​​

​​width: 95%;​​


​​21​​

​​padding: .4em;​​


​​22​​

​​}​​


​​23​​

 


​​24​​

​​fieldset {​​


​​25​​

​​padding: 0;​​


​​26​​

​​border: 0;​​


​​27​​

​​margin-top: 25px;​​


​​28​​

​​}​​


​​29​​

 


​​30​​

​​h1 {​​


​​31​​

​​font-size: 1.2em;​​


​​32​​

​​margin: .6em 0;​​


​​33​​

​​}​​


​​34​​

 


​​35​​

​​div#users-contain {​​


​​36​​

​​width: 350px;​​


​​37​​

​​margin: 20px 0;​​


​​38​​

​​}​​


​​39​​

 


​​40​​

​​div#users-contain table {​​


​​41​​

​​margin: 1em 0;​​


​​42​​

​​border-collapse: collapse;​​


​​43​​

​​width: 100%;​​


​​44​​

​​}​​


​​45​​

 


​​46​​

​​div#users-contain table td, div#users-contain table th {​​


​​47​​

​​border: 1px solid #eee;​​


​​48​​

​​padding: .6em 10px;​​


​​49​​

​​text-align: left;​​


​​50​​

​​}​​


​​51​​

 


​​52​​

​​.ui-dialog .ui-state-error {​​


​​53​​

​​padding: .3em;​​


​​54​​

​​}​​


​​55​​

 


​​56​​

​​.validateTips {​​


​​57​​

​​border: 1px solid transparent;​​


​​58​​

​​padding: 0.3em;​​


​​59​​

​​}​​


​​60​​

​​</​​​​style​​​​>​​


​​61​​

​​<!-- ReSharper disable ExpressionIsAlwaysConst -->​​


​​62​​

​​<​​​​script​​​​>​​


​​63​​

​​$(function () {​​


​​64​​

​​var name = $("#name"),​​


​​65​​

​​email = $("#email"),​​


​​66​​

​​password = $("#password"),​​


​​67​​

​​allFields = $([]).add(name).add(email).add(password),​​


​​68​​

​​tips = $(".validateTips");​​


​​69​​

 


​​70​​

​​function updateTips(t) {​​


​​71​​

​​tips​​


​​72​​

​​.text(t)​​


​​73​​

​​.addClass("ui-state-highlight");​​


​​74​​

​​setTimeout(function () {​​


​​75​​

​​tips.removeClass("ui-state-highlight", 1500);​​


​​76​​

​​}, 500);​​


​​77​​

​​}​​


​​78​​

 


​​79​​

​​function checkLength(o, n, min, max) {​​


​​80​​

​​if (o.val().length > max || o.val().length < ​​​​min​​​​) {​​


​​81​​

​​o.addClass("ui-state-error");​​


​​82​​

​​updateTips("Length of " + n + " must be between " +​​


​​83​​

​​min + " and " + max + ".");​​


​​84​​

​​return false;​​


​​85​​

​​} else {​​


​​86​​

​​return true;​​


​​87​​

​​}​​


​​88​​

​​}​​


​​89​​

 


​​90​​

​​function checkRegexp(o, regexp, n) {​​


​​91​​

​​if (!(regexp.test(o.val()))) {​​


​​92​​

​​o.addClass("ui-state-error");​​


​​93​​

​​updateTips(n);​​


​​94​​

​​return false;​​


​​95​​

​​} else {​​


​​96​​

​​return true;​​


​​97​​

​​}​​


​​98​​

​​}​​


​​99​​

 


​​100​​

​​$("#dialog-form").dialog({​​


​​101​​

​​autoOpen: false,​​


​​102​​

​​height: 300,​​


​​103​​

​​width: 350,​​


​​104​​

​​modal: true,​​


​​105​​

​​buttons: {​​


​​106​​

​​"Create an account": function () {​​


​​107​​

​​var ​​​​bValid​​ ​​= ​​​​true​​​​;​​


​​108​​

​​allFields.removeClass("ui-state-error");​​


​​109​​

 


​​110​​

​​bValid​​ ​​= bValid && checkLength(name, "username", 3, 16);​​


​​111​​

​​bValid​​ ​​= bValid && checkLength(email, "email", 6, 80);​​


​​112​​

​​bValid​​ ​​= bValid && checkLength(password, "password", 5, 16);​​


​​113​​

 


​​114​​

​​bValid​​ ​​= bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i,​​


​​115​​

​​"Username may consist of a-z, 0-9, " +​​


​​116​​

​​"underscores, begin with a letter.");​​


​​117​​

​​// From jquery.validate.js (by joern),​​


​​118​​

​​// contributed by Scott Gonzalez:​​


​​119​​

​​// http://projects.scottsplayground.com/email_address_validation/​​


​​120​​

​​bValid​​ ​​= bValid && checkRegexp(email,​​


​​121​​

​​/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com");​​


​​122​​

​​bValid​​ ​​= bValid && checkRegexp(password,​​


​​123​​

​​/^([0-9a-zA-Z])+$/,​​


​​124​​

​​"Password field only allow : a-z 0-9");​​


​​125​​

 


​​126​​

​​if (bValid) {​​


​​127​​

​​$("#users tbody").append("<tr>" +​​


​​128​​

​​"<​​​​td​​​​>" + name.val() + "</​​​​td​​​​>" +​​


​​129​​

​​"<​​​​td​​​​>" + email.val() + "</​​​​td​​​​>" +​​


​​130​​

​​"<​​​​td​​​​>" + password.val() + "</​​​​td​​​​>" +​​


​​131​​

​​"</​​​​tr​​​​>");​​


​​132​​

​​$(this).dialog("close");​​


​​133​​

​​}​​


​​134​​

​​},​​


​​135​​

​​Cancel: function () {​​


​​136​​

​​$(this).dialog("close");​​


​​137​​

​​}​​


​​138​​

​​},​​


​​139​​

​​close: function () {​​


​​140​​

​​allFields.val("").removeClass("ui-state-error");​​


​​141​​

​​}​​


​​142​​

​​});​​


​​143​​

 


​​144​​

​​$("#create-user")​​


​​145​​

​​.button()​​


​​146​​

​​.click(function () {​​


​​147​​

​​$("#dialog-form").dialog("open");​​


​​148​​

​​});​​


​​149​​

​​});​​


​​150​​

​​</​​​​script​​​​>​​


​​151​​

​​<!-- ReSharper restore ExpressionIsAlwaysConst -->​​


​​152​​

​​</​​​​head​​​​>​​


​​153​​

​​<​​​​body​​​​>​​


​​154​​

 


​​155​​

​​<​​​​div​​ ​​id​​​​=​​​​"dialog-form"​​ ​​title​​​​=​​​​"Create new user"​​​​>​​


​​156​​

​​<​​​​p​​ ​​class​​​​=​​​​"validateTips"​​​​>All form fields are required.</​​​​p​​​​>​​


​​157​​

 


​​158​​

​​<​​​​form​​​​>​​


​​159​​

​​<​​​​fieldset​​​​>​​


​​160​​

​​<​​​​label​​ ​​for​​​​=​​​​"name"​​​​>Name</​​​​label​​​​>​​


​​161​​

​​<​​​​input​​ ​​type​​​​=​​​​"text"​​ ​​name​​​​=​​​​"name"​​ ​​id​​​​=​​​​"name"​​


​​162​​

​​class​​​​= ​​​​"text ui-widget-content ui-corner-all"​​ ​​/>​​


​​163​​

​​<​​​​label​​ ​​for​​​​=​​​​"email"​​​​>Email</​​​​label​​​​>​​


​​164​​

​​<​​​​input​​ ​​type​​​​=​​​​"text"​​ ​​name​​​​=​​​​"email"​​ ​​id​​​​=​​​​"email"​​


​​165​​

​​value​​​​=​​​​""​​ ​​class​​​​=​​​​"text ui-widget-content ui-corner-all"​​ ​​/>​​


​​166​​

​​<​​​​label​​ ​​for​​​​=​​​​"password"​​​​>Password</​​​​label​​​​>​​


​​167​​

​​<​​​​input​​ ​​type​​​​=​​​​"password"​​ ​​name​​​​=​​​​"password"​​


​​168​​

​​id​​​​=​​​​"password"​​ ​​value​​​​=​​​​""​​


​​169​​

​​class​​​​=​​​​"text ui-widget-content ui-corner-all"​​ ​​/>​​


​​170​​

​​</​​​​fieldset​​​​>​​


​​171​​

​​</​​​​form​​​​>​​


​​172​​

​​</​​​​div​​​​>​​


​​173​​

 


​​174​​

 


​​175​​

​​<​​​​div​​ ​​id​​​​=​​​​"users-contain"​​ ​​class​​​​=​​​​"ui-widget"​​​​>​​


​​176​​

​​<​​​​h1​​​​>Existing Users:</​​​​h1​​​​>​​


​​177​​

​​<​​​​table​​ ​​id​​​​=​​​​"users"​​ ​​class​​​​=​​​​"ui-widget ui-widget-content"​​​​>​​


​​178​​

​​<​​​​thead​​​​>​​


​​179​​

​​<​​​​tr​​ ​​class​​​​=​​​​"ui-widget-header "​​​​>​​


​​180​​

​​<​​​​th​​​​>Name</​​​​th​​​​>​​


​​181​​

​​<​​​​th​​​​>Email</​​​​th​​​​>​​


​​182​​

​​<​​​​th​​​​>Password</​​​​th​​​​>​​


​​183​​

​​</​​​​tr​​​​>​​


​​184​​

​​</​​​​thead​​​​>​​


​​185​​

​​<​​​​tbody​​​​>​​


​​186​​

​​<​​​​tr​​​​>​​


​​187​​

​​<​​​​td​​​​>John Doe</​​​​td​​​​>​​


​​188​​

​​<​​​​td​​​​>john.doe@example.com</​​​​td​​​​>​​


​​189​​

​​<​​​​td​​​​>johndoe1</​​​​td​​​​>​​


​​190​​

​​</​​​​tr​​​​>​​


​​191​​

​​</​​​​tbody​​​​>​​


​​192​​

​​</​​​​table​​​​>​​


​​193​​

​​</​​​​div​​​​>​​


​​194​​

​​<​​​​button​​ ​​id​​​​=​​​​"create-user"​​​​>Create new user</​​​​button​​​​>​​


​​195​​

 


​​196​​

 


​​197​​

​​</​​​​body​​​​>​​


​​198​​

​​</​​​​html​​​​>​​


​​​​