1. 确保您已经引入了 jQuery 和 EasyUI 的相关文件。您可以从官方网站([EasyUI 官网](http://www.jeasyui.com/))下载并引入这些文件。
2. 创建一个包含验证的 HTML 表单:
<form id="myForm" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" class="easyui-validatebox" data-options="required:true">
<label for="email">Email:</label>
<input type="text" id="email" name="email" class="easyui-validatebox" data-options="required:true, validType:'email'">
<button type="button" id="submitBtn">Submit</button>
</form>
在这个例子中,我们使用 easyui-validatebox 类和 data-options 属性来指定验证规则。required:true 表示字段不能为空,validType:'email' 表示字段必须是合法的电子邮件格式。
3. 使用 jQuery EasyUI 的 validatebox 方法初始化表单验证:
<script>
$(function(){
// 初始化表单验证
$('#myForm').validatebox();
// 绑定表单提交按钮的点击事件
$('#submitBtn').click(function(){
// 检查表单是否通过验证
var isValid = $('#myForm').validatebox('isValid');
if (isValid) {
// 表单通过验证,可以执行提交操作
alert('Form is valid. Submitting...');
// Add your code to submit the form data here
} else {
// 表单未通过验证,显示错误信息
alert('Form is invalid. Please check the fields.');
}
});
});
</script>
在这个例子中,我们使用 validatebox 方法初始化了表单验证。通过调用 validatebox('isValid') 可以检查表单是否通过验证。
转载请注明出处:http://www.zyzy.cn/article/detail/13145/jQuery EasyUI