jQuery MiniUI

标题: validation错误信息加参数 [打印本页]

作者: manyunlai 时间: 2015-8-10 18:11:00 标题: validation错误信息加参数

我想把出错的提示信息这样设计：
（1）统一把出错信息放到一个公共的位置，用传统的下面的形式定义，使用的的地方只用errorCode。
      errorCode001 = {0}请输入5位-10位的数字。

（2）动态替换出错信息的文字。
   比如上面errorCode001中，入果是个课程编号，就应该在页面提示如下信息。
   “课程编号请输入5位-10位的数字。”

请问怎么弄呢？

作者: dforce 时间: 2015-8-11 09:31:17

自定义验证请参考我们的示例
http://www.miniui.com/demo/#src=form/rules.html
监听onvalidation事件去处理

作者: manyunlai 时间: 2015-8-11 11:42:22

dforce 发表于 2015-8-11 09:31
自定义验证请参考我们的示例
http://www.miniui.com/demo/#src=form/rules.html
监听onvalidation事件去处 ...

谢谢回答。

我还有一点不是很清楚，怎么传参数进入validate处理函数，让提示信息中明确告诉用户是哪个项目出错了。
当然例子中集中显示的错误信息处，点击后能让相应项目获得焦点，还是希望在文本上也一目了然。

如果是自定义vtype该怎么传和接收呢？
      /*自定义vtype*/
      mini.VTypes["englishErrorText"] = "请输入英文";
      mini.VTypes["english"] = function (v) {
         var re = new RegExp("^[a-zA-Z\_]+$");
         if (re.test(v)) return true;
         return false;
      }
如果是通过监听onvalidation该怎么传和接收呢？
想当然下面这么搞不成啊。
<input id="pwd" name="Pwd" class="mini-password" errorMode="none" required="true" errorArgs={arg1:"密码",arg2:"必须6位的"}/>

作者: dforce 时间: 2015-8-11 11:56:07

manyunlai 发表于 2015-8-11 11:42
谢谢回答。

我还有一点不是很清楚，怎么传参数进入validate处理函数，让提示信息中明确告诉用户是哪个项 ...

<input id="pwd" name="Pwd" class="mini-password" errorMode="none" required="true" data-options={arg1:"密码",arg2:"必须6位的"} onvalidation="onValidation"/>
function onValidation(e){
var arg1=e.sender.arg1,arg2=e.sender.arg2;
   if (e.isValid) {
            if (xxxxx) {
                  e.errorText = "....";
                  e.isValid = false;
            }
         }
}
自定义属性需要放在data-options里面

作者: manyunlai 时间: 2015-8-11 14:36:14

dforce 发表于 2015-8-11 11:56
function onValidation(e){
var arg1=e.sender.arg1,arg2=e.sender.arg2;
if (e.isValid) {

加上data-options后就根本不进onvalidation后面的方法了。

<input id="pwd" name="Pwd" class="mini-password" errorMode="none" required="true" data-options={arg1:"密码", arg2:"必须6位的"} onvalidation="onEnglishAndNumberValidation" />

function onEnglishAndNumberValidation(e) {
if (e.isValid) {
      if (isEnglishAndNumber(e.value) == false) {
         e.errorText = e.sender.arg1 + e.sender.arg2 + "必须输入英文+数字";
         e.isValid = false;
      }
}
updateError(e);
}

作者: 开心翻转猫 时间: 2015-8-11 15:16:03

manyunlai 发表于 2015-8-11 14:36
加上data-options后就根本不进onvalidation后面的方法了。

直接使用miniui的Vtype多好.在自定义的vtyp里可以写很多的.当对应使用这个自定义的判断不通过的时候先别return, 你可以用JS控制焦点定到对应控件上. 也可以用js控制改变控件样式

=w= 萌萌哒的新人回答

作者: dforce 时间: 2015-8-11 15:25:11

manyunlai 发表于 2015-8-11 14:36
加上data-options后就根本不进onvalidation后面的方法了。

你既然用了errorMode="none"，当然是你自己处理验证提示
e.errorText是默认的验证提示

作者: manyunlai 时间: 2015-8-11 15:42:44

dforce 发表于 2015-8-11 15:25
你既然用了errorMode="none"，当然是你自己处理验证提示
e.errorText是默认的验证提示 ...

看样子我还是没有把想干的事情说明白。
我知道需要自己处理验证提示。
下面是miniUI给出的例子，我主要是在这个例子的基础上传入一些参数。
目的是提示给用户的错误信息中明确指明是哪个项目出错了。
      function onEnglishAndNumberValidation(e) {
         if (e.isValid) {
            if (isEnglishAndNumber(e.value) == false) {
                  e.errorText = "必须输入英文+数字";
                  e.isValid = false;
            }
         }
      }

所以我按照dforce老师的提示，加上了data-options，但是加上它后javaScript就不执行onvalidation后面的方法了。
不加data-options前，画面是正常执行的。

另外，“开心翻转猫”先生提示的用自定义vtype，可是miniUI中也没有类似的例子，不知从哪里下手啊！

作者: manyunlai 时间: 2015-8-11 15:58:46

manyunlai 发表于 2015-8-11 15:42
看样子我还是没有把想干的事情说明白。
我知道需要自己处理验证提示。
下面是miniUI给出的例子，我主要是 ...

/////////////////////////////////////////////////////////////////////////
html:
<h1>Form表单数据验证集中显示区域</h1>
<ul id="validGroup1" class="validGroup">
</ul>
<input id="test001" name="test001" class="mini-textbox" errorMode="none" required="true" vtype="EnglishAndNumber" onvalidation="updateError"/>

javaScript:
/*自定义vtype*/
mini.VTypes["EnglishAndNumberErrorText"] = "请输入英文";
mini.VTypes["EnglishAndNumber"] = function (v) {
var re = new RegExp("^[a-zA-Z\_]+$");
if (re.test(v)) return true;
return false;
}
function updateError(e) {miniUI例子，这里省略。
/////////////////////////////////////////////////////////////////////////
以上代码能正常运行，在错误提示区域提示“请输入英文”。
可是我想提示给用户更具体一些，
比如“{0}需要至少输入{1}位英文”，用参数替换后为“密码需要至少输入6位英文”。

作者: dforce 时间: 2015-8-11 17:21:25

manyunlai 发表于 2015-8-11 15:58
/////////////////////////////////////////////////////////////////////////
html:
Form表单数据验证 ...

data-options就是自定义属性的标准方法，肯定不会有什么影响其他东西的问题

<input class="mini-textbox" vtype="EnglishAndNumber:2,4" />
mini.VTypes["EnglishAndNumberErrorText"] = "{0}请输入英文{1}"

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