Jquery プラグイン easyUi はフォーム検証を実装します。-jsチュートリアル-php.cn

Jquery プラグイン easyUi はフォーム検証を実装します。

WBOY

リリース： 2016-05-16 15:25:34

オリジナル

1256 人が閲覧しました

実装する機能：学生情報を追加する際に、easyuiの検証機能を使用して、学生番号が重複していないか、学生番号が数字のみであるかを判定します

最終的な効果は以下のようになります:

しかし、これを行う過程で、一連の問題に遭遇しました:

validatebox の検証メソッドを展開します。初期の検証コードは次のとおりです:

//学号格式只能为数字  ****//这里没有问题****
number: {//value值为文本框中的值
  validator: function (value) {
    var reg = /^[0-9]*$/;
    return reg.test(value);
  },
  message: '学号格式不正确.'
},
//验证学号不能重复
snumber: {
   //param参数为textarea的id值
   validator: function (value, param) {
     //将从后台获取的json数据先放入textarea，再获取出来后解析成数组
     var snumbers = $.parseJSON($(param)[0].val());
     for(var i=0;i < snumbers.length;i++){
       if(value == snumbers[i]){ //如果学号有重复返回false
         return false;
       }
     }
     return true;
 }

ログイン後にコピー

他にも問題があり、いくつかの問題が発生したため、ここでは学生 ID の再検証のみを行います。

フォームは最初に次のように記述され、validType 属性が data-options 属性に記述されます:

<input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true,validType:'snumber[#snumbers]', missingMessage:'请输入学号'" />
<textarea id="snumbers" style="display: none"></textarea>

ログイン後にコピー

ここで問題があります。#snumbers を引用符で囲む必要があるため、Firebug はエラーを報告しますが、引用符を直接追加するとエラーが発生します。これは三重引用符と同等です。インターネット上には多くの情報があり、エスケープを使用するものもありますが、easyui のソースコードを変更しない限り、これは easyui の解析に問題があると思われます。ご存知の方がいらっしゃいましたら、ぜひご教示ください。
次に、次のように validType 属性を外側に置くと、検証が成功します。

<input id="addSnumber" validType="snumber['#snumbers']" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'请输入学号'" />
<textarea id="snumbers" style="display: none"></textarea>

ログイン後にコピー

そこで、学生番号形式の検証を追加するにはどうすればよいかという新たな疑問が生じます。

これは私が書いた方法ですが、これはまだ三重引用符の問題だと思います。さまざまな方法を試しましたが、うまくいきませんでした。

<input id="addSnumber" validType="['snumber['#snumbers']', 'number']" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'请输入学号'" />
<textarea id="snumbers" style="display: none"></textarea>

ログイン後にコピー

次に、easyui コントロールを動的にロードするという別の方法を試しましたが、2 つの検証をまとめるとやはり同じ問題が発生しました。ここで easyui の解析の問題は解決したはずなので、心配する必要はありません。

ここで 2 つの問題が発生しました。1 つは、ajax から返されたデータを validType 属性に入れる方法です。つまり、データを保存するために別のテキストエリアを使用しない方法です。

をガイドしてください。

2 番目の問題は、easyui コントロールの動的設定が無効であるということです。簡単に言うと、コードは次のとおりです。

それだけですが、easyui の API を調べてみると、特定の DOM 要素しか解析できないことがわかりました。

<input id="addSnumber" style="width: 200px; height: 30px;" type="text" name="snumber" />
//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
上面这样在jQuery里设置easyui控件后，没有效果，后来百度了下，动态添加easy控件后需要重新渲染下，如下：
//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析所有页面
$.parser.parse();

ログイン後にコピー

次のコードでは効果が得られません:

後で百度を通じて知りました:

//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析指定元素
$.parser.parse($("#addSnumber"));

ログイン後にコピー

パーサーは、$("#addSnumber") 自体は含まず、$("#addSnumber") の子孫要素のみをレンダリングします。また、その子孫要素には、Easyui でサポートされるコントロールクラスが含まれていないため、この場所を取得する必要があります。望ましい効果。

したがって、単一の要素をレンダリングしたい場合は、次のように記述する必要があります:

前の質問に戻り、学生番号を繰り返すことができないことと、学生番号の形式を確認してください。

//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析指定元素，找它的父元素
$.parser.parse($("#addSnumber").parent());

ログイン後にコピー

最後に、ネットで色々な情報を調べてみたところ、最初に全ての学生証をクライアントに読み込んでから検証するという私の考えはうまくいかなかったのですが、その際に複数のユーザーが学生証を追加した場合に問題が発生しました。重複する可能性があります。

最後に、次のように、すべての学生 ID を取得する操作が検証関数に組み込まれます。

このように書く利点は、リアルタイムに判定用のデータを読み込めることと、フォーム送信時に再度判定用のデータを読み込んでパラメータを渡す必要がないことです。三重引用符はなくなりましたが、三重引用符が 1 つあります。欠点は、データベースを何度も要求し、大量のサーバーリソースを消費することです。

//验证学号不能重复
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet&#63;method=AllSNumber",
      success: function(data){//在验证函数里加载数据，加载过来后判断输入的值
        var snumbers = $.parseJSON(data);
        for(var i=0;i < snumbers.length;i++){
          if(value == snumbers[i]){
            flag = false;
            break;
          }
        }
      }
    });
    
    return flag;
  },
  message: '学号重复'
},

ログイン後にコピー

フォームを送信するときに、フォームを確認するために次の文を追加してください:

ここで別の質問があります。フォームのコードは次のとおりです:

//验证表单
var validate = $("#editStuForm").form("validate");
if(!validate){
　　$.messager.alert("消息提醒","请检查你输入的数据!","warning");
　　return;
} else{
　　//提交
}

ログイン後にコピー

validType 属性を data-options の外側に配置すると、検証できなくなり、Firebug がエラーを報告します。！！

<input id="addSnumber" class="easyui-textbox" validType="'snumber', 'number'" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:'请输入学号'" />

ログイン後にコピー

最後にデータオプションに入れます:

OK、すべてOK、両方の検証はOKです! ！！

<input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, validType:['snumber', 'number'], missingMessage:'请输入学号'" />

ログイン後にコピー

概要: easyui は重複と形式を検証し、複数の検証を行います

//学号格式只能为数字
number: {//value值为文本框中的值
  validator: function (value) {
    var reg = /^[0-9]*$/;
    return reg.test(value);
  },
  message: '学号格式不正确.'
},
//验证学号不能重复
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet&#63;method=AllSNumber",
      success: function(data){//在验证函数里加载数据，加载过来后判断输入的值
        var snumbers = $.parseJSON(data);
        for(var i=0;i < snumbers.length;i++){
          if(value == snumbers[i]){
            flag = false;
            break;
          }
        }
      }
    });
    
    return flag;
  },
  message: '学号重复'
},

ログイン後にコピー

最終的な効果は以下のようになります:

<tr>
  <td>学号:</td>
  <td>
     <input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, validType:['snumber', 'number'], missingMessage:'请输入学号'" />
  </td>
</tr>

ログイン後にコピー

わかりました! ！！それらのほとんどは、多くのことを試した後、私自身がまだ理解していない問題なので、この記事が役立つことを願っています。みんな。