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

最新推荐文章于 2024-11-13 15:29:17 发布
最新推荐文章于 2024-11-13 15:29:17 发布
阅读量79 收藏
点赞数
文章标签： javascript php 数据库 ViewUI
原文链接：http://www.cnblogs.com/NNUF/archive/2012/05/06/2479662.html
版权

前几日做了表单验证的控件，近日做了一些修改，增加了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; font-size: 12px; }
        .tip { display: inline-block; padding: 5px; line-height: 16px; }
        .tip img { position: relative; top: 3px; *top: 2px; }
        .tip span { position: relative; left: 5px; *top: -1px; }
        label { width: 100px; float: left; line-height: 23px; font-size: 13px; }
        .typetext, .typepsw, .typeselect { border-radius: 3px; border: 2px solid #a1a1a1; height: 20px; line-height: 20px; width: 150px; padding: 2px; }
        .typeselect { height: 27px; line-height: 27px; width: 158px; }
    </style>
</head>
<body>
<h1>form表单ajax登陆验证demo</h1>
<form action="" method="post" id="vvgForm">
    <div>
        <label for="username"> 用户名：</label>
        <input type="text" name="username" id="username" class="typetext required ">
        <span class="tip">必填，字母、数字以及(-_)组成，以字母开头</span>
    </div>
    <div>
        <label for="email"> 邮箱是：</label>
        <input type="text" name="email" id="email" class="typetext required">
        <span class="tip">必填</span>
    </div>
    <div>
        <label for="psw"> 密码：</label>
        <input type="password" name="psw" id="psw" class="typepsw required">
        <span class="tip">6-12位字符</span>
    </div>
    <div>
        <label for="pswRepeat"> 重复密码：</label>
        <input type="password" name="pswRepeat" id="pswRepeat" class="typepsw required">
        <span class="tip"></span>
    </div>
    <div>
        <label for="phoneNo"> 固定电话：</label>
        <input type="text" name="phoneNo" id="phoneNo" class="typetext">
        <span class="tip">格式：000-00000000或者0000-0000000</span>
    </div>
    <div>
        <label for="mobileNo"> 手机号码：</label>
        <input type="text" name="mobileNo" id="mobileNo" class="typetext required">
        <span class="tip">必填</span>
    </div>
    <div>
        <label for="question"> 查询密码问题：</label>
        <select name="question" id="question" class="typeselect">
            <option selected value="">--请您选择--</option>
            <option value="我的宠物名字？">我的宠物名字？</option>
            <option value="我最好的朋友是谁？">我最好的朋友是谁？</option>
            <option value="我最喜爱的颜色？">我最喜爱的颜色？</option>
            <option value="我最喜爱的电影？">我最喜爱的电影？</option>
            <option value="我最喜爱的影星？">我最喜爱的影星？</option>
            <option value="我最喜爱的歌曲？">我最喜爱的歌曲？</option>
            <option value="我最喜爱的食物？">我最喜爱的食物？</option>
            <option value="我最大的爱好？">我最大的爱好？</option>
        </select>
        <span class="tip">用于找回密码</span>
    </div>
    <div>
        <label for="question2"> 查询密码答案：</label>
        <input type="text" name="question2" id="question2" class="typetext">
        <span class="tip"></span>
    </div>
    <div>
        <label for="byear">出生日期：</label>
        <select name="byear" tabindex="8" id="byear">
            <script language="JavaScript">
                var tmp_now = new Date();
                for (i = 1930; i <= tmp_now.getFullYear(); i++) {
                    document.write("<option value='" + i + "' " + (i == tmp_now.getFullYear() - 24 ? "selected" : "") + ">" + i + "</option>")
                }
            </script>
        </select>
        年
        <select name="bmonth">
            <option value="01" selected>1</option>
            <option value="02">2</option>
            <option value="03">3</option>
            <option value="04">4</option>
            <option value="05">5</option>
            <option value="06">6</option>
            <option value="07">7</option>
            <option value="08">8</option>
            <option value="09">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        月
        <select name="bday" tabindex="10" alt="日:无内容">
            <option value="01" selected>1</option>
            <option value="02">2</option>
            <option value="03">3</option>
            <option value="04">4</option>
            <option value="05">5</option>
            <option value="06">6</option>
            <option value="07">7</option>
            <option value="08">8</option>
            <option value="09">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
            <option value="17">17</option>
            <option value="18">18</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="21">21</option>
            <option value="22">22</option>
            <option value="23">23</option>
            <option value="24">24</option>
            <option value="25">25</option>
            <option value="26">26</option>
            <option value="27">27</option>
            <option value="28">28</option>
            <option value="29">29</option>
            <option value="30">30</option>
            <option value="31">31</option>
        </select>
        <span class="tip"></span>
    </div>
    <div>
        <label for="gender">性别：</label>
        <input type="radio" name="gender" id="gender" value="男" checked>
        男
        <input type="radio" name="gender" value="女">
        女
    </div>
    <div>
        <label>选择你的爱好：</label>
        <input type="checkbox" name="hobby[]" value="dance" checked>跳舞
        <input type="checkbox" name="hobby[]" value="tour">旅游
        <input type="checkbox" name="hobby[]" value="sing">唱歌
        <input type="checkbox" name="hobby[]" value="dance">打球
    </div>
    <div>
        <input type="button" value="提交" id="btn">
        <input type="reset" value="重置" id="btn2">
    </div>
    <div id="request"></div>
</form>
<script type="text/javascript" src="javascript/vvgbase.1.0.js"></script>
<script type="text/javascript" src="javascript/formCheck.js"></script>
</body>
</html>

formCheck.js代码：

ps:被一个IE问题折腾了很久

(function () {
    var VVG_Form_Checking = function (formId, options, url) {
        //获取表单对象和配置属性
        this.form = VVG.$(formId);
        this.options = options;
        this.postUrl = url || '';
        //console.log(options.username[0]);
        //this.form.onsubmit = this.on_Submit;
        //表单验证状态初始化
        this.status = {};
        for (var key in options) {
            this.status[key] = false;
        }
    };
    VVG_Form_Checking.prototype = {
        addFormEvent:function () {
            //获取表单对象里的NodeList
            var formElements = this.form.elements;
            var len = formElements.length;
            var that = this;
            for (var i = 0; i < len; i++) {
                switch (formElements[i].type) {
                    case 'text' :
                        var thisId = formElements[i].id;
                        if (that.options[thisId]) {
                            var thisReg = that.options[thisId][0]; //对应ID的正则表达式
                            var thisTip = that.options[thisId][1]; //对应ID的提示用语
                            //添加事件
                            formElements[i].onfocus = function (t) {
                                return function () {
                                    that.onFocus(t);
                                }
                            }(thisId);
                            formElements[i].onblur = function (t, reg, tip) {
                                return function () {
                                    that.onBlur(t, reg, tip);
                                }
                            }(thisId, thisReg, thisTip);
                        }
                        break;
                    case 'password':
                        //设置每个对象的初始状态
                        thisId = formElements[i].id;
                        //ID被options初始化时执行
                        if (that.options[thisId]) {
                            thisReg = that.options[thisId][0]; //对应ID的正则表达式
                            thisTip = that.options[thisId][1]; //对应ID的提示用语
                            //添加事件
                            formElements[i].onfocus = function (t) {
                                return function () {
                                    that.onFocus(t);
                                }
                            }(thisId);
                            formElements[i].onblur = function (t, reg, tip) {
                                return function () {
                                    that.onBlur(t, reg, tip);
                                }
                            }(thisId, thisReg, thisTip);
                        }
                        //判断pswinput的ID是否含有repeat,含有为重复输入的密码框
                        //密码框与重复输入密码框的ID规则为psw+Repeat
                        if (thisId.indexOf('Repeat') != -1) {
                            //获取初次输入密码框的ID
                            var preId = thisId.substring(0, thisId.indexOf('Repeat'));
                            //console.log(!!thisId.indexOf('Repeat'));
                            formElements[i].onfocus = function (t) {
                                return function () {
                                    that.onFocus(t);
                                }
                            }(thisId);
                            formElements[i].onblur = function (t, p) {
                                return function () {
                                    that.passWordCheck(t, p);
                                }
                            }(thisId, preId);
                        }
                        break;
                    case 'button':   //提交按钮
                        formElements[i].onclick = function (event) {
                            //点击后执行事件
                            //alert('提交');
                            that.on_Submit(event);
                        };
                        break;
                    default:
                        break;
                }
            }
        },
        passWordCheck:function (thisId, preId) {
            var thisIdValue = document.getElementById(thisId).value;
            var preIdValue = document.getElementById(preId).value;
            var my = VVG.$(thisId);
            if (thisIdValue == '') {
                my.style.background = '#ffcece';
                my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/wrong.png"/>' + '<span>必填项</span>';
                this.status[thisId] = false;

            } else if (thisIdValue != preIdValue) {
                my.style.background = '#ffcece';
                my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/wrong.png"/>' + '<span>两次输入的密码不一致</span>';
                this.status[thisId] = false;
            } else {
                my.style.background = '';
                my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/right.png"/>';
                this.status[thisId] = true;
            }
        },
        onFocus:function (id) {
            var my = document.getElementById(id);
            //设置背景颜色
            my.style.background = '#faff7b';
        },
        onBlur:function (id, reg, tip) {
            var my = document.getElementById(id);
            var name = my.getAttribute('name');
            var myValue = my.value;
            var that = this;
            //判断值是否为空
            if (myValue == '') {
                my.style.background = '#ffcece';
                my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/wrong.png"/>' + '<span>必填项</span>';
                that.status[id] = false;
            } else {
                if (!reg.test(myValue)) {
                    my.style.background = '#ffcece';
                    my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/wrong.png"/>' + '<span>' + tip + '</span>';
                    that.status[id] = false;
                } else {
                    //判断用户名和Email是否存在
                    if (name == 'username' || name == 'email') {
                        // 后面的random() 作用为 清楚AJAX 的IE 缓存：（
                        var url = 'checkexist.php?name=' + name + '&value=' + myValue + '&t=' + Math.random();
                        //验证是否存在的AJAX部分
                        VVG.ajaxRequest(url, {
                                method:'GET',
                                htmlResponseListener:function (data) {
                                    //如果传回来的值为flase
                                    //alert('返回值' + data);
                                    if (data == 'yes') {
                                        my.style.background = '#ffcece';
                                        my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/wrong.png"/>' + '<span> 已经存在 </span>';
                                        that.status[id] = false;
                                    } else {
                                        my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/right.png"/>' + '<span> 可以注册</span>';
                                        that.status[id] = true;
                                    }
                                },
                                loadListener:function () {
                                    my.parentNode.getElementsByTagName('span')[0].innerHTML = '<span>正在验证...</span>';
                                },
                                send:null
                            }
                        );
                    } else {
                        my.style.background = '';
                        my.parentNode.getElementsByTagName('span')[0].innerHTML = '<img src="img/right.png"/>';
                        this.status[id] = true;
                    }
                }
                //如果是密码框失去焦点，则获取重复输入密码框的焦点,再触发失去焦点检查事件
                if (my.type == 'password') {
                    var repeatId = id + 'Repeat';
                    //alert(repeatId);
                    var repeatNode = document.getElementById(repeatId);
                    //如果有第二次输入的密码框且有值的时候
                    if (repeatNode) {
                        repeatNode.focus();
                        //repeatNode.blur();
                    }
                }
            }
        },
        on_Submit:function (event) {
            event = VVG.getEvent(event);
            var len = this.form.elements.length;
            var eles = this.form.elements;
            for (var i = 0; i < len; i++) {
                eles[i].focus();
            }
            //检查状态
            var checkStatus = this.checkStatus();
            if (!checkStatus) {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            } else {
                if (this.postUrl) {
                    this.ajaxPost();
                } else {
                    this.form.submit();
                }
            }
        },
        checkStatus:function () {
            var key;
            var xobj = this.status;
            for (key in xobj) {
                if (this.status.hasOwnProperty(key)) {
                    if (!this.status[key]) {
                        return false;
                    }
                }
            }
            return true;
        },
        ajaxPost:function () {
            var url = this.postUrl;
            var that = this;
            VVG.ajaxRequest(url, {  //提交表单的AJAX部分
                method:'POST',
                send:VVG.serialize(this.form),
                htmlResponseListener:function (responseData) {
                    if (!!responseData) {
                        VVG.$('request').innerHTML = responseData;
                        VVG.$('btn').disabled = false;
                        that.form.reset();
                    }
                },
                loadListener:function () {
                    VVG.$('btn').disabled = true;
                }

            })
        }

    };
    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();
})();

主要用到的XMLHttpRequest 对象函数（来自javascript DOM高级程序设计里面的）

// 创建一个XMLHttpRequest对象

    function getRequestObject(url, options) {
        var req = false;
        if (window.XMLHttpRequest) {
            req = new window.XMLHttpRequest();
        } else if (window.ActiveXObject) {
            req = new window.ActiveXObject('Microsoft.XMLHTTP');
        }
        if (!req) return false;
        // 设置默认数据
        options = options || {};
        options.method = options.method || 'GET';
        options.send = options.send || null;
        // 定义事件侦听函数
        req.onreadystatechange = function () {
            switch (req.readyState) {
                case 1:
                    // 正在载入
                    if (options.loadListener) {
                        options.loadListener.apply(req, arguments);
                    }
                    break;
                case 2:
                    // 载入完成
                    if (options.loadedListener) {
                        options.loadedListener.apply(req, arguments);
                    }
                    break;
                case 3:
                    // 正在交互
                    if (options.ineractiveListener) {
                        options.ineractiveListener.apply(req, arguments);
                    }
                    break;
                case 4:
                    // 交互完成
                    try {
                        if (req.status && req.status == 200) {
                            // 获取文件格式
                            // 为不同的content-type设置对应的方法
                            var contentType = req.getResponseHeader('Content-Type');
                            var mimeType = contentType.match(/\s*([^;]+)\s*(;|$)/i)[1];
                            //console.log(mimeType);
                            switch (mimeType) {
                                case 'text/plain':
                                    if (options.txtResponseListener) {
                                        options.txtResponseListener.call(req, req.responseText);
                                    }
                                    break;
                                case 'text/javascript':
                                case 'application/javascript':
                                    if (options.jsResponseListener) {
                                        options.jsResponseListener.call(req, req.responseText);
                                    }
                                    break;
                                case 'application/json':
                                    if (options.jsonResponseListener) {
                                        try {
                                            var json = parseJSON(req.responseText);
                                        } catch (e) {
                                            json = false;
                                        }
                                        options.jsonResponseListener.call(req, json);
                                    }
                                    break;
                                case 'text/xml':
                                case 'application/xml':
                                case 'application/xhtml+xml':
                                    if (options.xmlResponseListener) {
                                        options.xmlResponseListener.call(req, req.responseXML);
                                    }
                                    break;
                                case 'text/html':
                                    if (options.htmlResponseListener) {
                                        options.htmlResponseListener.call(req, req.responseText);
                                    }
                                    break;
                            }
                            if (options.completeListener) {
                                options.completeListener.apply(req, arguments);
                            }
                        } else {
                            if (options.errorListener) {
                                options.errorListener.apply(req, arguments);
                            }
                        }

                    } catch (e) {
                        //ignore errors
                        //alert('Response Error: ' + e);
                    }
                    break;
            }
        };
        // Open the request
        req.open(options.method, url, true);
        // 添加一个header识别标记
        req.setRequestHeader('VVG-Base-Ajax-Request', 'VVG.AjaxRequest');
        if (options.method == 'POST') {
            req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        }
        return req;
    }

    window.VVG.getRequestObject = getRequestObject;

    // 简易包装send方法与发送XMLHttpRequest请求

    function ajaxRequest(url, options) {
        var req = getRequestObject(url, options);
        return req.send(options.send);
    }

    window.VVG.ajaxRequest = ajaxRequest;

 

以下是PHP的代码，代码很烂，PHP只是了解

PHP数据库创建代码：

View Code 
<?php
$con = mysql_connect("localhost", "root", "root");
if (!$con) {
    die('Could not connect: ' . mysql_error());
} else {
    echo("数据库连接成功,开始创建数据库...");
}
if (mysql_query("CREATE DATABASE VVGDemo default character set utf8;", $con)) {

    echo "Database VVGDemo created...";
}
else
{
    echo "Error creating database: " . mysql_error();
}

//Create table in my_db database

mysql_select_db("VVGDemo", $con);

$sql = "CREATE TABLE UserInfo
    (
    UserID int NOT NULL AUTO_INCREMENT,
    PRIMARY KEY(UserID),
    userName varchar(15),
    email varchar(15),
    password varchar(15),
    passWordQ varchar(30),
    passWordA varchar(30),
    phoneno varchar(30),
    mobileno varchar(30),
    birthday varchar(30),
    gender varchar(5),
    hobbys varchar(100)
    )";


if (mysql_query($sql, $con)) {

    echo("数据表创建成功!");

} else {

    echo "Error creating table: " . mysql_error();
}

mysql_close($con);

?>

getPost.php 代码：

View Code 
<?php
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['pswRepeat'];
$question = $_POST['question'];
$question2 = $_POST['question2'];
$phoneno = $_POST['phoneNo'];
$mobileno = $_POST['mobileNo'];
$birthday = "$_POST[byear]"."$_POST[bmonth]"."$_POST[bday]" ;
$gender = $_POST['gender'];

$hobbys = implode('|',$_POST['hobby']);

//连接数据库

$con = mysql_connect("localhost", "root", "root");
if (!$con) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db("vvgdemo", $con);
//修改字符编码
mysql_query("SET NAMES UTF8");
//插入数据表
$sql="INSERT INTO UserInfo (userName,email,password,passWordQ,PassWordA,phoneno,mobileno,birthday,gender,hobbys)
VALUES ('$username', '$email', '$password','$question','$question2','$phoneno','$mobileno','$birthday','$gender','$hobbys')";
if (!mysql_query($sql,$con))
  {
      die('Error: ' . mysql_error());
  }else{
    $result = mysql_query("SELECT * FROM userinfo");
    echo "<table width=50% style='text-align:center;'>";
    echo "<tr><th colspan=3><h1>注册成功！以下是成功注册会员</h1><th></tr>";
    echo "<tr>";
    echo "<th>用户名</th><th>邮箱</th><th>手机号码</th>";
    echo "</tr>";
    while($row = mysql_fetch_array($result))
      {
      echo "<tr>";
      echo "<td>".$row['userName'] . "</td><td>" . $row['email']. "</td><td>" .$row['mobileno'] . "</td>";
      echo "</tr>";
      }
    echo "</table>";
  }
mysql_close($con);
?>

checkexeist.php代码

View Code 
<?php
$name = $_GET['name'];
$value = $_GET['value'];

//连接数据库

$con = mysql_connect("localhost", "root", "root");
if (!$con) {
    die('Could not connect: ' . mysql_error());
}

mysql_select_db("vvgdemo", $con);


$selectsql = "SELECT * FROM userinfo WHERE $name ='$value'";

//$selectsql = "SELECT * FROM userinfo WHERE email =  'aqxie@1631.com'";

$result = mysql_query("$selectsql");

$row = mysql_fetch_array($result);

if ($row)
  {
      echo "yes";
  }else{
    echo "no";
  }
mysql_close($con);
?>

 

 仅供研究，欢迎指点，代码下载：点击下载

 

转载于:https://www.cnblogs.com/NNUF/archive/2012/05/06/2479662.html

weixin_30644369
关注
Javascript 表单验证对象控件 + ajax简单验证重复项与ajax提交数据
04-05
在"Javascript 表单验证对象控件 + ajax简单验证重复项与ajax提交数据"这个主题中，我们将深入探讨如何利用JavaScript提高用户体验，通过实时验证用户输入的数据，以及如何使用Ajax技术异步验证和提交数据，避免页面...
ajax和jsp表单验证,Web中的常用的两种表单验证
weixin_36092871的博客
08-05 337
今天介绍下web开发中常用的两种表单验证，form提交和ajax提交form提交表单是通过form提交时，用户点击提交(input typte="submit")按钮触发form提交部门：请选择部门一部门二姓名:请选择触发事件 onsubmit="return check(this.form )" 当check函数返回true的时候正常提交，false则不提交。function check(for...
AJAX实时表单验证系统
weixin_30765637的博客
08-28 1003
本文还有配套的精品资源，点击获取 简介：在网页开发中，"ajax验证表单"是一项关键任务，确保数据符合格式和规则，提升数据质量和用户体验。本应用通过使用JavaScript和XMLHttpRequest对象实现后台验证，无需页面刷新。它包括前端验证、事件处理、Ajax调用、服务器端处理、响应处理、用户体验和安全性等关键步骤，以jQuery库简化开发流程，创建高效、安全的表单...
js常用事件（2）
be willing to share
08-27 358
当表单元素的值发生变化时触发（例如选择菜单、复选框）。: 当元素或选择的文本被拖到有效的放置目标上方时触发。: 当用户在输入框中输入时持续触发。: 当浏览器窗口大小发生变化时触发。: 当拖动的元素或文本被放置时触发。: 当元素获得或失去焦点时触发。: 当页面或元素滚动时触发。: 当用户提交表单时触发。: 当页面完全加载时触发。: 当拖动操作开始时触发。: 当拖动操作结束时触发。
AJAX+JavaScript表单验证
光羽住一
06-01 1979
AJAX表单验证 1.前端组件以及JS+AJAX完成表单数据的上传 <html> <head></head> <body> <fieldset> <div class="form-group"> <input class="form-control" placeholder="请输入用户名...
jquery+ajax验证不通过也提交表单问题处理
10-25
3. 在提交表单时，通过JavaScript获取form标签上的control属性值，然后使用Ajax遍历请求这些控件的验证。如果验证不通过，则将控件ID和提示信息保存到数组中，并且在页面上显示提示信息。 4. 在JavaScript中声明两...
asp+Ajax简单客户登陆验证
10-31
### ASP + Ajax 简单客户登录验证详解 随着Web技术的发展，用户对网页交互性的需求越来越高，传统的ASP页面在处理用户数据时存在明显的缺点，比如每次提交表单都需要进行页面刷新，这不仅降低了用户体验，还可能...
jQuery通过ajax快速批量提交表单数据
10-21
其次，由于Ajax提交不会导致页面刷新，需要在客户端进行输入验证，防止非法数据的提交；最后，要注意浏览器的同源策略，确保Ajax请求的服务器端脚本和当前页面在同一个域下，否则会因为跨域问题导致请求失败。 总体...
jquery+ajaxform+springboot控件实现数据更新功能
10-18
使用jQuery发起AJAX请求，可以异步地向服务器提交数据，并根据服务器返回的数据进行相应的页面更新操作，极大地提升了用户体验。 ### 知识点四：Ajax表单提交的优化 在传统的Ajax表单提交中，开发者需要手动获取...
在PHP中应用AJAX技术检测用户名是否重复
qq366567的博客
12-05 2013
在PHP中应用AJAX技术检测用户名 <!-- body { margin-bottom: 0px; background-color: #64284A; } td{ font-size:12px; } # style5 { font-family: "文鼎淹水体"; font-size: 18pt; color: #64284A; } # style2 {font-size: 16
jquery之ajax提交、js验证表单
Dreaming
05-07 177
============================================================================ 原创作品，允许转载。转载时请务必以超链接形式标明原始出处、以及本声明。 请注明转自：http://yunjianfei.iteye.com/blog/ ==========================================...
表单验证（使用AJAX）
qinghuawusheng的博客
11-29 9067
1，编写页面 2，查询数据库名字， 3，配置文件 4，页面判断效果展示：在不输入信息或者错误信息时光标移开直接提示 重置将所有提示清楚1，编写页面 <body> <form action="add" onSubmit="return login(this);"> <h2 align="center">请注册</h2> <table align="center">
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 419
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 158
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 760
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
Vue中的常用指令
m0_62388400的博客
11-12 1169
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
从零开始快速构建Vue3项目
最新发布
欧唯薇
11-13 864
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
身份证校验与AJAX技术详解：规则、验证与实践
本文是一篇关于使用JavaScript和AJAX技术进行身份证校验以及前端数据验证的教程。首先，作者解释了身份证号码的基本构成和校验规则。身份证号码通常由15位或18位数字组成，其中15位的全为数字，而18位的前17位是数字...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值