easyui ajax 表单验证_javascript 表单验证:示例代码

qianduancss

温馨提示:这篇文章已超过239天没有更新,请注意相关的内容是否还可用!

easyui是一款基于jQuery的UI插件,提供了丰富的组件和功能,方便开发人员快速构建网页界面。其中,easyui ajax表单验证是一种通过异步请求来验证表单数据的方法,可以在不刷新页面的情况下进行表单验证,并实时反馈验证结果。

我们需要引入easyui的相关文件,包括jquery.js、jquery.easyui.min.js和jquery.easyui.min.css。然后,在需要进行表单验证的页面中,我们可以使用easyui的validatebox组件来实现ajax表单验证。

示例代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>EasyUI Ajax表单验证示例</title>

<link rel="stylesheet" type="text/css" href="jquery.easyui.min.css">

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.easyui.min.js"></script>

</head>

<body>

<form id="myForm" method="post">

<input class="f0ba-be12-de1e-3d78 easyui-validatebox" type="text" name="username" data-options="required:true, validType:'ajaxValidate'">

<input class="be12-de1e-3d78-6a76 easyui-validatebox" type="password" name="password" data-options="required:true, validType:'ajaxValidate'">

<input type="submit" value="提交">

</form>

<script type="text/javascript">

$(function(){

$.extend($.fn.validatebox.defaults.rules, {

ajaxValidate: {

validator: function(value, param){

var result = false;

$.ajax({

url: "validate.php",

type: "post",

async: false,

data: {field: param[0], value: value},

success: function(data){

result = (data == "true");

}

});

return result;

},

message: '字段已存在,请重新输入'

}

});

$('#myForm').validate();

});

</script>

</body>

</html>

在上述示例代码中,我们通过引入easyui的相关文件,包括jquery.js、jquery.easyui.min.js和jquery.easyui.min.css。然后,在表单中的输入框中添加了class为"easyui-validatebox",并设置了data-options属性来指定验证规则。

在JavaScript部分,我们通过$.extend()方法扩展了validatebox的验证规则,添加了名为ajaxValidate的验证规则。该验证规则的validator属性是一个函数,通过ajax请求服务器端验证数据是否合法。在这个例子中,我们使用了一个名为validate.php的服务器端文件来处理验证请求,通过传递参数field和value来进行验证。

我们通过调用validate()方法来启用表单验证功能。

这样,当用户在输入框中输入数据时,会触发ajax请求进行验证,并根据服务器端返回的结果来显示验证信息。如果验证不通过,用户将无法提交表单。

文章版权声明:除非注明,否则均为莫宇前端原创文章,转载或复制请以超链接形式并注明出处。

取消
微信二维码
微信二维码
支付宝二维码