jQWidgets jqxValidator focus属性

jqxValidator是基于jQuery和JQWidgets库的表单验证插件，可以简单、灵活地对表单进行验证功能的实现，其中focus属性可以用于设置验证失败时焦点自动定位到哪个元素上。

具体操作方法如下：

1. 引入必要的文件

在html文件中引入jQuery和JQWidgets库的js、css样式文件。

<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入JQWidgets库 -->
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<!-- 引入jqxValidator插件 -->
<script src="https://jqwidgets.com/public/jqwidgets/jqxvalidator.js"></script>

2. 设置表单验证

在js文件中设置表单验证规则，使用jqxValidator进行验证，其中可以设置focus属性，用于验证失败时焦点自动定位到哪个元素上。

var validator = $("#myForm").jqxValidator({
    rules: [
        { input: "#name", message: "姓名不能为空！", action: "keyup, blur", rule: "required" }, 
        { input: "#phone", message: "请输入正确的手机号码！", action: "keyup, blur", rule: "phone" }
    ],
    focus: true, // 若验证失败，则焦点自动定位到验证失败的元素上
    hintType: "label"
});

以上代码中，我们使用jqxValidator对myForm表单进行验证。其中，我们设置了两个验证规则：第一个规则用于验证姓名是否为空，第二个规则用于验证手机格式是否正确。当验证失败时，我们将焦点自动定位在验证失败的元素上。

3. 示例如下

下面，我们将通过两个具体的示例，进一步掌握JQWidgets jqxValidator focus属性的使用：

示例1：验证表单项为空时，焦点自动定位到该元素上

html代码：

<form id="myForm">
    <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
    </div>
</form>

js代码：

var validator = $("#myForm").jqxValidator({
    rules: [
        { input: "#username", message: "请输入用户名！", action: "keyup, blur", rule: "required" }, 
        { input: "#password", message: "请输入密码！", action: "keyup, blur", rule: "required" }
    ],
    focus: true, // 若验证失败，则焦点自动定位到验证失败的元素上
    hintType: "label"
});

这里我们验证用户名和密码是否为空。当验证失败时，焦点会自动定位到为空的元素上。

示例2：验证表单项手机号格式不正确时，焦点自动定位到该元素上

html代码：

<form id="myForm">
    <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label for="phone">手机号：</label>
        <input type="text" id="phone" name="phone">
    </div>
</form>

js代码：

var validator = $("#myForm").jqxValidator({
    rules: [
        { input: "#name", message: "姓名不能为空！", action: "keyup, blur", rule: "required" }, 
        { input: "#phone", message: "请输入正确的手机号码！", action: "keyup, blur", rule: "phone" }
    ],
    focus: true, // 若验证失败，则焦点自动定位到验证失败的元素上
    hintType: "label"
});

这里我们验证姓名是否为空，手机号是否符合格式（使用phone规则验证）。当验证失败时，焦点会自动定位到手机号码输入框上。

综上所述，通过以上两个简单的示例，我们可以看出jqxValidator的focus属性有强大的功能，可以使验证失败后自动定位焦点，提高验证提示效果，有效地优化用户体验。