jQuery MiniUI

标题: 表单验证问题 [打印本页]

作者: Aisin丿Gioro 时间: 2017-8-16 10:31:17 标题: 表单验证问题

[attach]9718[/attach]点击保存的时候怎么用表单验证和miniui的alert结合，当没有添加姓名的时候提示姓名不能为空，添加完姓名点击提交提示账号不能为空依次类推。这个怎么用miniui的mini.alert()实现

作者: felt 时间: 2017-8-16 11:06:53

<div id="form1">
<input vtype="required" class="mini-textbox" name="a1" requiredErrorText="姓名不能为空"/>
<input vtype="required" class="mini-textbox" name="a2" requiredErrorText="年龄不能为空"/>
</div>

<button onclick="saveData()">submit</button>
function saveData() {
      var form = new mini.Form("form1");
      form.validate();
      var errors = form.getErrors()
      var t = errors[0].getRequiredErrorText()
      mini.alert(t)
}

作者: Aisin丿Gioro 时间: 2017-8-16 11:31:22

本帖最后由 Aisin丿Gioro 于 2017-8-16 11:34 编辑

felt 发表于 2017-8-16 11:06
submit
function saveData() {
var form = new mini.Form("form1");

表单同时设置了maxLength="12"而且是必填，现在填了数据但是长度不够，还是提示不能为空这个怎么弄[attach]9720[/attach][attach]9719[/attach]

作者: qsw 时间: 2017-8-16 11:41:05

Aisin丿Gioro 发表于 2017-8-16 11:31
表单同时设置了maxLength="12"而且是必填，现在填了数据但是长度不够，还是提示不能为空这个怎么弄 ...

var form = new mini.Form("form1");
      form.validate();
      var errors = form.getErrorTexts();
      var t = errors[0];
      mini.alert(t)
试试这样

作者: qsw 时间: 2017-8-16 11:45:26

qsw 发表于 2017-8-16 11:41
var form = new mini.Form("form1");
form.validate();
var errors = form.getErrorText ...

经测试可以

作者: Aisin丿Gioro 时间: 2017-8-16 11:50:28

qsw 发表于 2017-8-16 11:45
经测试可以

可以的，谢谢。另外再问一下那个按钮点击确定之后怎么将焦点放在对应的输入框中以方便重新填写。

作者: qsw 时间: 2017-8-16 11:59:22

Aisin丿Gioro 发表于 2017-8-16 11:50
可以的，谢谢。另外再问一下那个按钮点击确定之后怎么将焦点放在对应的输入框中以方便重新填写。 ...

mini.alert（t, "提示", function(){
mini.get("a1").focus();
}）

作者: Aisin丿Gioro 时间: 2017-8-16 14:15:32

本帖最后由 Aisin丿Gioro 于 2017-8-16 14:17 编辑

qsw 发表于 2017-8-16 11:59
mini.alert（t, "提示", function(){
mini.get("a1").focus();
}）

mini.showMessageBox(),的确定和取消按钮怎么用样式区分，现在看了一下代码都是用mini-button的样式，怎么让俩个按钮的背景色不一样而且hover也不一样。
[attach]9721[/attach]
另外那个确定按钮有个蓝色的边框怎么去掉，按F12就没了或者点空白处就没了这个是怎么回事

作者: felt 时间: 2017-8-16 19:19:31

Aisin丿Gioro 发表于 2017-8-16 14:15
mini.showMessageBox(),的确定和取消按钮怎么用样式区分，现在看了一下代码都是用mini-button的样式，怎么 ...

不清楚你这蓝色边框是哪来的。按钮可以根据第一个或最后一个来区分。
.mini-messagebox-buttons:first-child .mini-button{

}

作者: Aisin丿Gioro 时间: 2017-8-17 08:27:06

felt 发表于 2017-8-16 19:19
不清楚你这蓝色边框是哪来的。按钮可以根据第一个或最后一个来区分。
.mini-messagebox-buttons:first-ch ...

还是得用css3的选择器弄啊，但是这个ie兼容性不好吧

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)