首页 > 安全资讯 >

easyui Form验证

12-08-15

@author YHC这个教程将向你展示如何验证一个form,easyui框架提供一个validatebox 插件去验证一个form,在这个教程我们将创建一个联系我们的form和应用validatebox 插件验证form,然后你可以改编这个form到你自己...

@author YHC

这个教程将向你展示如何验证一个form,easyui框架提供一个validatebox 插件去验证一个form,在这个教程我们将创建一个联系我们的form和应用validatebox 插件

验证form,然后你可以改编这个form到你自己的需求.

 


查询  Demo

 

创建    form
让我们创建一个简单的联系我们的form和name, email, subject and message字段.
[html]
<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>   
        <textarea name="message" style="height:60px;"></textarea>   
    </div>   
    <div>   
        <input type="submit" value="Submit">   
    </div>   
</form>   

<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> 
        <textarea name="message" style="height:60px;"></textarea> 
    </div> 
    <div> 
        <input type="submit" value="Submit"> 
    </div> 
</form>  我们添加一个样式名为easyui-validatebox 到input 标记,所以input标记将应用验证根据validType 属性.
当form数据无效时阻止form提交
当用户点击form的submit按钮,如果form是无效的我们应该阻止form提交.
[javascript]
$('#ff').form({   
    url:'form3_proc.php',   
    onSubmit:function(){   
        return $(this).form('validate');   
    },   
    success:function(data){   
        $.messager.alert('Info', data, 'info');   
    }   
});   

$('#ff').form({ www.2cto.com
    url:'form3_proc.php', 
    onSubmit:function(){ 
        return $(this).form('validate'); 
    }, 
    success:function(data){ 
        $.messager.alert('Info', data, 'info'); 
    } 
});  如果form是无效的,一个提示信息将显示.

作者:yhc13429826359

相关文章
最新文章
热点推荐