Dojo 表单中的验证

Question

我有一个 dojo 表单，其中有 5 个字段：其中 2 个是验证文本框，1 个是过滤选择，2 个是数字文本框。单击搜索按钮时，我希望用户至少输入 5 个字段中的一个值。我如何应用此验证？

谢谢

Answer 1

您需要使用dijit/form/Form http://dojotoolkit.org/reference-guide/1.10/dijit/form/Form.html#dijit-form-form

require(["dojo/parser", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox"], function(parser) {
    document.body.className += ' tundra'; //just to have the proper css  in the snippet
  
  
    parser.parse() //to render properly in the snippets
    
    
    //here is the part you are looking for:
    getValues = function() {
      console.log(myForm.getValues());
      values = myForm.getValues();
      var oneHasValue = false;
      for(var i in values) {
         if(values[i]) {
           oneHasValue = true;
           break;
         }
      }
      if(!oneHasValue) {
         alert('at least one field should not be empty')  
      }
    }
    
});

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">

<div data-dojo-type="dijit/form/Form" id="myForm" data-dojo-id="myForm"
encType="multipart/form-data" action="" method="">
    
    <table style="border: 1px solid #9f9f9f;" cellspacing="10">
        <tr>
            <td>
                <label for="name">Name:</label>
            </td>
            <td>
                <input type="text" id="name" name="name" required="true" data-dojo-type="dijit/form/ValidationTextBox"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="gender">gender:</label>
            </td>
            <td>
                <input type="text" id="gender" name="gender" required="true" data-dojo-type="dijit/form/ValidationTextBox"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="extra">extra info:</label>
            </td>
            <td>
                <input type="text" id="extra" name="extra" required="true" data-dojo-type="dijit/form/ValidationTextBox"/>
            </td>
        </tr>
        <tr>
            <td>
                <label for="dob">Date of birth:</label>
            </td>
            <td>
                <input type="text" id="dob" name="dob" data-dojo-type="dijit/form/DateTextBox"/>
            </td>
        </tr>
    </table>

    <button data-dojo-type="dijit/form/Button" type="button" onClick="getValues()">Get Values from form!</button>

</div>

Dojo 表单中的验证

Validation in Dojo Form

javascript

dojo

dijit.form

dijit.layout