Javascript 表单应验对象控件 + ajax简单验证重复项与ajax提交数据-JavaSript-爱易网页

Javascript 表单应验对象控件 + ajax简单验证重复项与ajax提交数据

日期：2014-05-16　浏览次数：20444 次

Javascript 表单验证对象控件 + ajax简单验证重复项与ajax提交数据

-----------------------------------效果预览---------------------------------

-----------------------------------------------------------------

前几日做了表单验证的控件，近日做了一些修改，增加了AJAX的简单验证，AJAX的提交，后台程序使用PHP+MYSQL，

所以又对此文进行修改，表单验证部分基本没变，修改了以前的一个小BUG，对JS代码做了分离到一个JS的文件的处理。

-----------------------------------------------------------------

对象使用方法：肿么感觉这么复杂。。。。我只是做练习。。。。

构造函数需要传递三个参数，一个是对应form的ID，另一个是options对象（包含匹配的正则表达式，和出错提示），

最后一个是表单Ajax提交的URL,带URL的时候按照Ajax方法提交，不带URL的时候按照正常的表单提交，

options的属性是ID(此处的属性ID对应上面相应的表单ID)组成，如下：

    var options = {
        username:[/^[a-zA-Z][a-zA-Z0-9_-]{2,}$/, '字母、数字以及(-_)组成，字母开头,不低于3个字符'],
        email:[/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/, '邮件格式不正确'],
        //phoneNo:[/^(\d{3}-\d{8})|(\d{4}-\d{7})$/, '号码格式为 0000-0000000 或 000-00000000'],
        mobileNo:[/^1[358]\d{9}$/, '必填，手机号码不正确'],
        psw:[/^.{6,12}$/, '6-12位字符']
    };
    var checkMe = new VVG_Form_Checking('vvgForm', options, 'getPost.php');
    checkMe.addFormEvent();

还有验证邮箱和用户名是否存在也有一个ajax提交URL，是在JS代码里面配，PHP水平有限

应该可以整合到getpost.php里面的吧。。。。。。

-----------------------------------------------

HTML代码如下：

View Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单验证控件</title>
    <style type="text/css">
        #vvgForm div { margin: 5px 0;

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Javascript 表单应验对象控件 + ajax简单验证重复项与ajax提交数据

相关资料更多>

推荐阅读更多>