jquery 下拉等各种效果

http://www.gbtags.com/technology/jquery/20111026formvalidationwithjqueryvalidationengine/

 

 

 

我们将使用这个插件实现一个简单的注册页面，用户要求输入电子邮件，密码，名字，如下：

Javascript

下载后，请选择正确的locale js，当然，中文没有，你需要自己翻译，导入类库代码如下：

jQuery类库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>

jquery.validationEngine类库：

<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>

<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script> 

js验证代码：

$("#reg").validationEngine('attach');
$("#regSubmit").click(function(check) {    
    if($("#reg").validationEngine('validate')){
        var rmailval=$('#mail').val();
        var rpwdval=$('#pwd').val();
        var rnameval=$('#fullname').val();
        $('.webbody').html('恭喜你，注册成功！');
    }
    check.preventDefault();//此处阻止提交表单  
});

以上代码定义了，递交button被点击后，先验证表单是否通过，如果通过，则输出注册成功字样，大家如果使用PHP，JSP，可以在这里加上后台数据库保存或者用户验证代码。

CSS

导入CSS主题：

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

HTML

<section class="webbody">
    <div id="reg_title">用户注册</div>
    <form method="post" id="reg">
    <p>
        <input class="email formtip validate[required,custom[email]]"  id="mail" type="text" tipholder="电子邮件" class=""/>
    </p>
    <p>
        <input class="name formtip validate[required]"  id="fullname" type="text" tipholder="名称"/>
    </p>
    <p>
        <input class="pwd formtip validate[required]"  id="pwd" type="password" tipholder="输入你的密码"/>
    </p>        
    <p>
        <input class="submit" id="regSubmit" type="image" value="注册" src="images/reg.png">
    </p>
    <p id="mail-tip"></p>
    </form>
</section>

支持行内的输入验证，正则表单式包括：

• phone：电话格式，可以自己添加指定国家格式
• mail：电子邮件
• URL：链接，格式例如 http://www.gbin1.com，ftp://gbin1.com，http://gbin1.com
• date：日期类型，ISO日期， YYYY-MM-DD
• number：数字类型，float格式，比如，-143.22，或者+234.23
• integer：整型integer格式，比如, -635 +22 345
• ipv4：IPv4地址，例如，127.0.0.1
• onlyNumberSp：只允许数字和空格
• onlyLetterSp：只允许字符和空格

只需要如下使用：

<input type="text" id="myid" name="myid" class="validation[custom[onlyLetter]]"/> 

插件使用文档：http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
插件下载地址：http://github.com/posabsolute/jQuery-Validation-Engine
插件演示地址：http://www.position-relative.net/creation/formValidator/

原文来自：GBin1教程：使用jQuery插件jquery.validationEngine实现表单验证功能