Dojo學習6 功能強大的文本框：dijit.form.ValidationTextbox

時間 2019-11-06

標籤 dojo 學習功能強大文本 dijit.form.validationtextbox dijit form validationtextbox 欄目 Dojo 简体版

原文原文鏈接

6. 功能強大的文本框：dijit.form.ValidationTextbox
這個文本輸入框的功能比較強大，關鍵是它可以提供一些經常使用的驗證和大小寫轉換。下面介紹一個例子和一些經常使用的屬性：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>validationTextbox</title>
<style type="text/css">
@import "../js/dojo/resources/dojo.css";
@import "../js/dijit/themes/tundra/tundra.css";
.dijitInputFieldFocused{
border:solid 2px #FFDF00;
}
</style>

<body class="tundra">
<form name="form1">
<input type="text" id="vt" dojoType="dijit.form.ValidationTextbox"
  promptMessage="請輸入信息"
  invalidMessage="輸入的信息有誤"
  required="true"
  trim="true"
  propercase="true"
>css

一些屬性：
required="true"  //必須填寫
trim="true"   //將先後的空格自動刪除<
propercase="true"  //單詞首字母大寫
uppercase="true"  //大寫字母形式
lowercase="true"  //小寫字母形式html

驗證文本組件能夠支持正則表達式驗證，好比：
不包含空格驗證：
<input id="vt1" type="text" name="phone" value="someTestString"
   dojoType="dijit.form.ValidationTextbox"
   regExp="[\w]+"
   required="true"
   trim="true"
   invalidMessage="輸入中不容許包含空格">java

email地址驗證:
<input id="vt2" type="text" name="phone" value="/amushen2005@hotmail.com"
   dojoType="dijit.form.ValidationTextbox"
   regExp="(\w+@\w+\.\w+)(\.{0,1}\w*)(\.{0,1}\w*)"
   required="true"
   trim="true"
   invalidMessage="輸入合法的email地址">正則表達式

只容許輸入數字：
<input id="vt1" type="text" name="phone" value="/123.34"
   dojoType="dijit.form.NumberTextbox"
   required="true"
   trim="true"
   invalidMessage="只容許輸入數字">

</form>
</body>
</html>網站

ValidationTextbox的一些經常使用方法：
setValue(); //不要使用.value或者.innerHTML來設置值，你可能設置不成功或者失去校驗
getValue();
validate(); //手工校驗
isEmpty(); //是否爲空
isValid(); //是否符合校驗規則ui

關於校驗的正則表達式法比較靈活，功能也很是強大，能夠到微軟或者sun的官方網站查看一些權威的資料。或者直接上網上搜索一些經常使用的正則表達式。
下面給出一些經常使用正則表達式：
一、   非負整數：」^d+$」
二、   正整數：」^[0-9]*[1-9][0-9]*$」
三、   非正整數：」^((-d+)|(0+))$」
四、   負整數：」^-[0-9]*[1-9][0-9]*$」
五、   整數：」^-?d+$」
六、   非負浮點數：」^d+(.d+)?$」
七、   正浮點數：」^((0-9)+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$」
八、   非正浮點數：」^((-d+.d+)?)|(0+(.0+)?))$」
九、   負浮點數：」^(-((正浮點數正則式)))$」
十、英文字符串：」^[A-Za-z]+$」
十一、英文大寫串：」^[A-Z]+$」
十二、英文小寫串：」^[a-z]+$」
1三、英文字符數字串：」^[A-Za-z0-9]+$」
1四、英數字加下劃線串：」^w+$」
1五、E-mail地址：」^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$」
1六、URL：」^[a-zA-Z]+://(w+(-w+)*)(.(w+(-w+)*))*(?s*)?$」
1七、匹配中文字符的正則表達式： [\u4e00-\u9fa5]
1八、匹配雙字節字符(包括漢字在內)：[^\x00-\xff]
1九、匹配HTML標記的正則表達式：/<(.*)>.*<\/\1>|<(.*) \/>/
20、匹配國內電話號碼：\d{3}-\d{8}|\d{4}-\d{7}
2一、匹配中國郵政編碼：[1-9]\d{5}(?!\d)
2二、匹配身份證：\d{15}|\d{18}編碼