AUI:VALIDATOR校验的使用简介

liferay中一般常见用AUI写表单。有时候我们需要做验证。为了保证页面的一致性。最好和liferay的源码一样使用相同的校验方式。那么下面就介绍一下AUI的校验<aui:validator>标签的使用。

例如有文本框

<aui:input type="text"></aui:input>

我们想要设置这个项目的校验。下面所有的校验都是写在这个标签的之间例如

<aui:input type="text">
    <aui:validator  name="required"  errorMessage="Field is required" >
</aui:input>

1.设置为必填项

<aui:validator  name="required "  errorMessage="Field is required" >

name设置为 required 即为必填项 errorMessage里面写上自己想要提示的话的KEY，然后在国际化资源文件里面写上对应的label。这样当不符合校验规则的时候。就会在字段后面加入提示语。

2.仅接受字母

<aui:validator name="alpha"/>

name设置为alpha 即只接受字母。

3.只接受对应的后缀名的文件(在type为file时有效)

<aui:validator name="acceptFiles">'jpg,png,tif,gif'</aui:validator>

把name设置为acceptFiles 也就是接收文件的意思。标签中间的即为可接受的后缀名，多个后缀名用半角的,逗号来隔开。

4.只接受字母和数字

<aui:validator name="alphanum"/>

name设置为alphanum 即为仅接受字母和数字。

5.校验输入项是否为日期格式

<aui:validator name="date"></aui:validator>

name设置为date 即会校验输入的值是否是日期格式。

6.仅接收数字

<aui:validator name="digits"></aui:validator>

name设置为digits 即为仅接收数字

7.仅接收邮箱地址

<aui:validator name="email"/>

name设置为 email 即可校验输入值是否符合邮箱地址的格式

8.某项值是否与另一项相同

 <aui:input name="password1" id="password1" value='' label="Password">
 <aui:validator name="required"></aui:validator>
</aui:input>
<aui:input name="password2" value='' label="Re Type Password">
 <aui:validator name="equalTo">'#<portlet:namespace />password1'</aui:validator>
</aui:input>

name设置为equalTo 在标签中间写上想比较的项目的id即可比对是否相同。

9.最大值校验

<aui:validator name="max">60</aui:validator>

name设置为 max 标签中间输入最大值即可。

10.最小值校验

<aui:validator name="min">60</aui:validator>

name设置为 min 标签中间输入最小值即可。

11.输入字符最大数量

<aui:validator name="maxLength">10</aui:validator>

name设置为maxLength 标签中间输入最大字符数即可。

12.输入最小字符数量

<aui:validator name="minLength">8</aui:validator>

name设置为minLength 标签中间输入最小字符数即可。

13.可有正负号与小数的数字

<aui:validator name="number"></aui:validator>

name设置为 number 即仅接受有正负号和小数的数字。

14.校验网址url格式

<aui:validator name="url"/>

name设置为url 即可校验输入值是否符合URL格式。

15.自定义校验

 <aui:input name="age" value='' label="Age">
 <aui:validator  name="custom"  errorMessage="You must have 18 years or more" >
function (val, fieldNode, ruleValue) {
var result = false;
if (val >=18) {
result = true;
}
return result;
}
</aui:validator>
</aui:input>

name设置为 custom 即为自定义校验。自定义校验要自己写js 当返回true的时候为校验通过。false为校验不通过。方法参数中的val为输入项里面的值。

自定义校验不通过时无法自动阻止表单提交。请自己在js中做表单提交的校验与阻止。

16.校验的复合使用demo

 <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<liferay-theme:defineObjects />
<portlet:defineObjects /> <aui:form name="fm2" action="" method="post">
       <aui:input name="userName" value='' label="User Name">
              <aui:validator name="required" />
              <aui:validator name="alphanum" />
       </aui:input>
       <aui:input name="firstName" value='' label="First Name">
              <aui:validator name="required" />
              <aui:validator name="alpha" />
       </aui:input>
       <aui:input name="lastName" value='' label="Last Name">
              <aui:validator name="alpha" />
       </aui:input>
       <aui:input name="email" value='' label="Email">
              <aui:validator name="email" />
       </aui:input>
       <aui:input name="date" value='' label="Date of Birth">
              <aui:validator name="date"></aui:validator>
       </aui:input>
       <aui:input name="phoneNumber" value='' label="Phone Number">
              <aui:validator name="digits"></aui:validator>
              <aui:validator name="minLength">8</aui:validator>
              <aui:validator name="maxLength">10</aui:validator>
       </aui:input>
       <aui:input name="price" value='' label="Price Range">
              <aui:validator name="number"></aui:validator>
              <aui:validator name="min">200</aui:validator>
              <aui:validator name="max">1000</aui:validator>
       </aui:input>
       <aui:input name="password1" id="password1" value='' label="Password"
              type="password">
              <aui:validator name="required"></aui:validator>
       </aui:input>
       <aui:input name="password2" value='' label="Re Type Password"
              type="password">
              <aui:validator name="required" />
              <aui:validator name="equalTo">'#<portlet:namespace />password1'</aui:validator>
       </aui:input>
       <aui:input name="webSite" value='' label="Website Address">
              <aui:validator name="url" />
       </aui:input>
       <aui:input name="age" value='' label="Age">
              <aui:validator name="custom"
                     errorMessage="You must have 18 years or more">
function (val, fieldNode, ruleValue) {
var result = false;
//alert(val);
if (val >=18) {
result = true;
}
return result;
}
</aui:validator>
       </aui:input>
       <aui:button type="submit" name="save" value="Save" />
</aui:form>

夫妻双双DEBUG

AUI:VALIDATOR校验的使用简介

一对程序员夫妻的技术点滴