关于jquery formValidator表单验证插件的使用

来源：互联网发布：k-means聚类算法python 编辑：程序博客网时间：2024/06/05 12:07

一、在java后台开发中，新增、修改页面时常会用到表单验证。可以手动验证，但用插件验证会提高开发效率。

二、

1、首先下载插件

地址：http://download.csdn.net/download/liangzehao521/5213684

2、将下载的文档放入Webapp目录下面的下（最好自己建一个文件夹，这样可以将所有的插件都放入这个文件夹目录下）

3、在webapp目录下面新建一个jsp页面

引入插件中的三个文件：jquery-1.4.4.min.js、formValidator-4.1.3.min.js、formValidatorRegex.js 即可。

4、具体的代码编写如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="includes/formvalidator4.1.3/jquery-1.4.4.min.js"></script><script type="text/javascript" src="includes/formvalidator4.1.3/formValidator-4.1.3.min.js"></script><script type="text/javascript" src="includes/formvalidator4.1.3/formValidatorRegex.js"></script><script type="text/javascript">$(document).ready(function () {$.formValidator.initConfig({alertMessage:true,onError:function(msg){alert(msg);}});    $("#sfz").formValidator({ onShow: "请输入15或18位的身份证", onfocus: "输入15或18位的身份证", onCorrect: "输入正确" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "你输入的身份证格式不正确" }); ;    $("#username").formValidator({     onShow: "请输入用户名",     onfocus: "请输入用户名",     onCorrect: "输入正确"     }).inputValidator({              min:4,max:10,              onError:"你输入的用户名非法,请确认"          });    $("#pass").formValidator({onShow: "请输入密码", onfocus: "请输入密码",onCorrect: "输入正确" }).inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"密码两边不能有空符号"},onError:"密码不能为空,请确认"});    $("#pass1").formValidator({    onShow:"输再次输入密码",    onFocus:"至少1个长度",    onCorrect:"密码一致"})    .inputValidator({    min:1,    empty:{leftEmpty:false,rightEmpty:false,emptyError:"重复密码两边不能有空符号"},    onError:"重复密码不能为空,请确认"    })    .compareValidator({    desID:"pass1",    operateor:"=",    onError:"两次次密码不一致,请确认"    });    });function aa(){if(!$.formValidator.pageIsValid())return ;}</script></head><body><table border="0px" style="font-size:12px"><tr><input type="button" value="提交" onclick="aa();"/></tr>    <tr>       <td align="right">身份证(正则表达式库):</td>      <td><input name="sfz" type="text" id="sfz" /></td>      <td><div id="sfzTip" style="width:300px"></div></td>  <!--必须注意这里提示验证信息中的div的id值，跟要验证控件中的id值多了一个Tip，下面的都是这样。必须多的是Tip，也必须要多。-->    </tr>    <tr>    <td>用户名：</td>    <td><input type="text" value="zhangsan" id="username" name="username"/></td>    <td><div id="usernameTip" style="width:300px"></div></td>    </tr>    <tr>    <td>密码：</td>    <td><input type="password" id="pass" name="pass"/></td>    <td><div id="passTip" style="width:300px"></div></td>    </tr>    <tr>    <td>确认密码：</td>    <td><input type="password" id="pass1" name="pass1"></td>    <td><div id="pass1Tip" style="width:300px"></div></td>    </tr> </table></body></html>

5、在地址栏输入链接：http://localhost:8888/test5/inputForm.jsp 回车

0 0