阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      EasyUI 表单 – 表单验证

      EasyUI 表单 - 表单验证

      本教程将向您展示如何验证一个表单。easyui 框架提供一个 validatebox 插件来验证一个表单。在本教程中,我们将创建一个联系表单,并应用 validatebox 插件来验证表单。然后您可以根据自己的需求来调整这个表单。

      创建表单(form)

      让我们创建一个简单的联系表单,带有 name、email、subject 和 message 字段:

          <div style="padding:3px 2px;border-bottom:1px solid #ccc">Form Validation</div>
          <form id="ff" method="post">
              <div>
                  <label for="name">Name:</label>
                  <input class="easyui-validatebox" type="text" name="name" required="true"></input>
              </div>
              <div>
                  <label for="email">Email:</label>
                  <input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
              </div>
              <div>
                  <label for="subject">Subject:</label>
                  <input class="easyui-validatebox" type="text" name="subject" required="true"></input>
              </div>
              <div>
                  <label for="message">Message:</label>
                  &lt;textarea name="message" style="height:60px;"&gt;&lt;/textarea&gt;
              </div>
              <div>
                  <input type="submit" value="Submit">
              </div>
          </form>
      

      我们添加一个样式名为 easyui-validatebox 到 input 标记,所以 input 标记将根据 validType 属性应用验证。

      当表单无效时阻止表单提交

      当用户点击表单的 submit 按钮时,如果表单是无效的,我们应该阻止表单提交。

          $('#ff').form({
              url:'form3_proc.php',
              onSubmit:function(){
                  return $(this).form('validate');
              },
              success:function(data){
                  $.messager.alert('Info', data, 'info');
              }
          });
      

      如果表单是无效的,将显示一个提示信息。

      目录
      目录