簡単なフォーム検証プラグイン(Jqueryに書かれています)
Web開発をするとき、フォーム検証の問題によく遭遇します.フォーム検証にはクライアント検証とサーバ側検証があります.この検証プラグインは私のプロジェクトの基本的なニーズを満たすだけです.
Validate_Tools.js
オブジェクトtypeがtext、textarea、passwordのinputラベルで使用できる検証タイプValidateTypeは、Int、Float、Email;
エラーメッセージをカスタマイズする必要がある場合は、ラベルにErrorMsgプロパティを追加できます.
フォーム検証では、フォームに属するHTMLタグを検証し、同じフォームに属するタグにValidateGroup属性を追加する必要があります.submitボタンにもValidateGroupを追加する必要があります.同じフォームのinputタグとsubmitボタンのValidateGroup属性値が同じであることが必要です.
次のように使用します.
jquery 1のため.4.4 selectタグを取得できるtype属性は「select-one」であり、
ただしjquery 1.7.1バージョンではselectラベルのtype属性が取得されないため、selectにtype=「select-one」を追加できます.
Validate_Tools.js
- function Validate_Text(obj) {
-
- return $.trim(obj.value) != "";
- }
-
- function Validate_Select(obj) {
-
- return $.trim(obj.value) != "";
- }
-
- function Validate_List(obj){
- var flag = false;
-
- $(obj).find("input").each(function(){
- if(this.checked){
- flag = true;
- return false;
- }
- });
-
- return flag;
- }
-
- function Validate_Expression(objValue, reg){
- return $.trim(objValue) == "" ? false : new RegExp(reg).test(objValue);
- }
-
- function Validate_Obj(obj) {
- var flag = false;
- var errorMsg = "";
- var objType = $(obj).attr("type");
- var objTitle = $(obj).parent(0).prev().text().replace(":", "").replace(":", "");
-
- try{
- if(objType == "text" || objType == "textarea" || objType == "password"){
- var validateType = $(obj).attr("ValidateType");
- switch (validateType){
- case "Int":
- flag = Validate_Expression(obj.value, "^[0-9]*$");
- if (!flag) {
- if ($.trim(obj.value) == "") {
- errorMsg = objTitle + " !";
- }
- else {
- errorMsg = objTitle + " , !";
- }
- }
- break;
- case "Float":
- flag = Validate_Expression(obj.value, "^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$");
- if (!flag) {
- if ($.trim(obj.value) == "") {
- errorMsg = objTitle + " !";
- }
- else {
- errorMsg = objTitle + " , !";
- }
- }
- break;
- case "Email":
- flag = Validate_Expression(obj.value, "^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$");
- if (!flag) {
- if ($.trim(obj.value) == "") {
- errorMsg = objTitle + " !";
- }
- else {
- errorMsg = objTitle + " , !";
- }
- }
- break;
- default:
- var regularExpression = $(obj).attr("ValidateExpression");
- if (regularExpression != undefined && regularExpression != "") {
- flag = Validate_Expression(obj.value, regularExpression);
- if (!flag) {
- if ($.trim(obj.value) == "") {
- errorMsg = objTitle + " !";
- }
- else {
- errorMsg = objTitle + " !";
- }
- }
- }
- else {
- flag = Validate_Text(obj);
- if (!flag) {
- errorMsg = objTitle + " !";
- }
- }
- break;
- }
- }
- else if(objType == "select-one"){
- flag = Validate_Select(obj);
- if (!flag) {
- errorMsg = " " + objTitle + "!";
- }
- }
- else if(objType == "file"){
- flag = Validate_Text(obj);
- if (!flag) {
- errorMsg = " " + objTitle + "!";
- }
- }
- else{
- flag = Validate_List(obj);
- if (!flag) {
- errorMsg = " " + objTitle + "!";
- }
- }
-
- if(!flag){
- if($(obj).attr("ErrorMsg") != undefined && $(obj).attr("ErrorMsg") != ""){
- errorMsg = $(obj).attr("ErrorMsg");
- }
-
- alert(errorMsg);
- try{
- obj.focus();
- }
- catch(e){
- }
- return flag;
- }
- }
- catch(e){
- alert(e.description);
- flag = false;
- return flag;
- }
-
- return flag;
- }
-
- function Validate_Form(){
- var flag = true;
-
- try {
- $("*[ValidateType]").each(function () {
- flag = Validate_Obj(this);
-
- if (!flag) {
- return flag;
- }
- });
- }
- catch (e) {
- alert(e.description);
- flag = false;
- }
-
- return flag;
- }
-
- function Validate_Group(group) {
- var flag = true;
-
- try {
- $("*[ValidateGroup]").each(function () {
- if ($(this).attr("type") != "submit") {
- if ($(this).attr("ValidateGroup") == group) {
- flag = Validate_Obj(this);
-
- if (!flag) {
- return flag;
- }
- }
- }
- });
- }
- catch (e) {
- alert(e.description);
- flag = false;
- }
-
- return flag;
- }
-
- $(function () {
- $("input[type='submit']").each(function () {
- if ($(this).attr("ValidateGroup") != undefined && $(this).attr("ValidateGroup") != "") {
- $(this).click(function () {
- return Validate_Group($(this).attr("ValidateGroup"));
- });
- }
- });
- //
- // $("*[ValidateType]").each(function () {
- // if ($(this).attr("type") != "submit") {
- // $(this).parent(0).append("<span style='color:red'>*</span>");
- // }
- // });
- });
オブジェクトtypeがtext、textarea、passwordのinputラベルで使用できる検証タイプValidateTypeは、Int、Float、Email;
エラーメッセージをカスタマイズする必要がある場合は、ラベルにErrorMsgプロパティを追加できます.
フォーム検証では、フォームに属するHTMLタグを検証し、同じフォームに属するタグにValidateGroup属性を追加する必要があります.submitボタンにもValidateGroupを追加する必要があります.同じフォームのinputタグとsubmitボタンのValidateGroup属性値が同じであることが必要です.
次のように使用します.
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductQuotationEdit.aspx.cs" Inherits="Trade.Web.Product.ProductQuotationEdit" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title> </title>
- <link href="../Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
- <link rel="stylesheet" href="../Styles/AutoComplete/jquery.autocomplete.css" type="text/css" />
- <script type="text/javascript" src="../Scripts/jquery-1.4.4.min.js"></script>
- <script type="text/javascript" src="../Scripts/Validate/Validate_Tools.js"></script>
- <script src="../Scripts/AutoComplete/jquery.autocomplete.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- function returnValue() {
- try {
- parent.closeDiv();
- }
- catch (e) {
- alert(e.message);
- }
- }
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <table class="table_edit">
- <tr>
- <th>
- :
- </th>
- <td>
- <asp:TextBox ID="ID" runat="server" Visible="false"></asp:TextBox>
- <asp:TextBox ID="ProductID" runat="server" Visible="false"></asp:TextBox>
- </td>
- <th>
- :
- </th>
- <td>
- <asp:TextBox ID="QuotationDate" runat="server" ValidateGroup="Supplier" ValidateType="Text"></asp:TextBox>
- </td>
- </tr>
- <tr>
- <th>
- :
- </th>
- <td>
- <asp:TextBox ID="SupplierItemNo" runat="server" ValidateGroup="Supplier" ValidateType="Text"></asp:TextBox>
- </td>
- <th>
- :
- </th>
- <td>
- <asp:DropDownList ID="Currency" runat="server" ValidateGroup="Supplier" ValidateType="Text"></asp:DropDownList>
- </td>
- </tr>
- <tr>
- <th>
- :
- </th>
- <td>
- <asp:TextBox ID="Price" runat="server" ValidateGroup="Supplier" ValidateType="Float"></asp:TextBox>
- </td>
- <th>
- :
- </th>
- <td>
- <asp:TextBox ID="MiniOrderQty" runat="server" ValidateGroup="Supplier" ValidateType="Int"></asp:TextBox>
- </td>
- </tr>
- <tr>
- <th>
- :
- </th>
- <td>
- <asp:DropDownList ID="IsBilling" runat="server" ValidateGroup="Supplier" ValidateType="Text">
- <asp:ListItem Text=" " Value="1"></asp:ListItem>
- <asp:ListItem Text=" " Value="0"></asp:ListItem>
- </asp:DropDownList>
- </td>
- <th>
- :
- </th>
- <td>
- <asp:DropDownList ID="IsTax" runat="server" ValidateGroup="Supplier" ValidateType="Text">
- <asp:ListItem Text=" " Value="1"></asp:ListItem>
- <asp:ListItem Text=" " Value="0"></asp:ListItem>
- </asp:DropDownList>
- </td>
- </tr>
- <tr>
- <th>
- :
- </th>
- <td colspan="3">
- <asp:TextBox ID="Remark" runat="server" TextMode="MultiLine"></asp:TextBox>
- </td>
- </tr>
- <tr>
- <td>
- </td>
- <td>
- <asp:Button ID="btnSave" runat="server" Text=" " ValidateGroup="Supplier" OnClick="btnSave_Click" />
- </td>
- </tr>
- </table>
- </div>
- </form>
- </body>
- </html>
jquery 1のため.4.4 selectタグを取得できるtype属性は「select-one」であり、
ただしjquery 1.7.1バージョンではselectラベルのtype属性が取得されないため、selectにtype=「select-one」を追加できます.