PHP：数据库中设置文本长度，通过js去限制前台文本长度。扩展：数据类型的限制-Toy模板网

这篇具有很好参考价值的文章主要介绍了PHP：数据库中设置文本长度，通过js去限制前台文本长度。扩展：数据类型的限制。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图

PHP：数据库中设置文本长度，通过js去限制前台文本长度。扩展：数据类型的限制,php,数据库,javascript

如上图：当测试111的长度超过数据库中限制的长度，进行提示，并且自动将多余部分截掉

HTML代码

<!-- 附加属性 -->
<div class="text-nav-1 " id="append1">  
    <div >append1</div>
    <input type="text"   autocomplete="off"  name="append1" value="<?= $_POST['append1'] ?>" /> 
</div>
<div class="text-nav-1 " id="append2">  
    <div >append2</div>
    <input type="text"   autocomplete="off"  name="append2" value="<?= $_POST['append2'] ?>" /> 
</div>
<div class="text-nav-1 " id="append3">  
    <div >append3</div>
    <input type="text"   autocomplete="off"  name="append3" value="<?= $_POST['append3'] ?>" /> 
</div>
<div class="text-nav-1 " id="append4">
    <div >append4</div>
    <input type="text"   autocomplete="off"  name="append4" value="<?= $_POST['append4'] ?>" />
</div>
<div class="text-nav-1 " id="append5">  
    <div >append5</div>
    <input type="text"   autocomplete="off"  name="append5" value="<?= $_POST['append5'] ?>" /> 
</div>

JS功能实现代码

<script type="text/javascript">
    window.onload=function(){
        <?php
        $sql1 = "SELECT * FROM attribute where is_show = 'Y'and table_name = 'customers'";
        $result1 = DB_query($sql1, $db);
        // 检查查询结果是否为空
        if (DB_num_rows($result1) > 0) {
            // 初始化一个空数组来存储查询结果
            $data = array();
            // 遍历查询结果并将每行数据存入数组中
            while ($row = DB_fetch_array($result1)) {
                $data[] = $row;
            }
        } else {
            echo "没有结果";
        }
        ?> 
        //给数据库输出的数组赋值
        var data = <?php echo json_encode($data); ?>;
        // console.log(data)
        //设置长度
        // 获取所有具有以 "append" 开头的 id 属性的 <div> 元素
        var divElements = document.querySelectorAll("div[id^='append']");
        // 遍历每个 <div> 元素
        divElements.forEach(function(divElement) {
            // 获取当前 <div> 元素下的 <input> 元素
            var inputElement = divElement.querySelector("input");       
            // 添加 onclick 事件监听器
            //设置长度的全局变量targetLength
            var targetLength = '';
            divElement.onclick = function(event) {
                //获取指定的id值
                var clickedDivId = event.currentTarget.id;
                // 根据点击的 div 的 ID 值查找对应的 length 值
                //对最开始查询的数据库数组进行处理
                var targetItem = data.find(function(item) {
                    //让数据库中的colum_name的值和指定的id的值相等
                    return item.column_name.toString() === clickedDivId;
                });
                // 判断是否找到匹配的项
                if (targetItem) {
                    //如果找到了对应的值，就进行赋值
                    targetLength = targetItem.length;
                    // console.log('Found length:', targetLength);
                } else {
                    console.log('ID not found');
                }
                // 在点击 <div> 时，将焦点设置到对应的 <input> 元素，执行失去焦点方法
                inputElement.focus();
            }
            
            // 添加 onblur 事件监听器
            inputElement.onblur = function() {
                //输出长度的值
                // console.log(targetLength)
                //判断当前长度和数据库中获取的长度的值
                if (this.value.length > targetLength) {
                    alert('超出长度限制！'); // 显示提示信息
                    this.value = this.value.slice(0, targetLength); // 截断超出长度的文本
                }
            };
        });
    }
</script>

扩展：数据类型的限制

默认对int,varchar,datetime进行限制

功能实现

<script type="text/javascript">
    window.onload=function(){
        <?php
        $sql1 = "SELECT * FROM attribute where is_show = 'Y'and table_name = 'customers'";
        $result1 = DB_query($sql1, $db);
        // 检查查询结果是否为空
        if (DB_num_rows($result1) > 0) {
            // 初始化一个空数组来存储查询结果
            $data = array();
            // 遍历查询结果并将每行数据存入数组中
            while ($row = DB_fetch_array($result1)) {
                $data[] = $row;
            }
        } else {
            echo "没有结果";
        }
        ?> 
        //给数据库输出的数组赋值
        var data = <?php echo json_encode($data); ?>;
        // console.log(data)
        //设置长度和数据类型
        // 获取所有具有以 "append" 开头的 id 属性的 <div> 元素
        var divElements = document.querySelectorAll("div[id^='append']");
        // 遍历每个 <div> 元素
        divElements.forEach(function(divElement) {
            // 获取当前 <div> 元素下的 <input> 元素
            var inputElement = divElement.querySelector("input");       
            // 添加 onclick 事件监听器
            //设置长度的全局变量targetLength
            var targetLength = '';
            //设置数据类型的全局变量targetType
            var targetType = '';
            divElement.onclick = function(event) {
                //获取指定的id值
                var clickedDivId = event.currentTarget.id;
                //根据点击的 div 的 ID 值查找对应的 length值 和 type值
                //对最开始查询的数据库数组进行处理
                var targetItem = data.find(function(item) {
                    //让数据库中的colum_name的值和指定的id的值相等
                    return item.column_name.toString() === clickedDivId;
                });
                // 判断是否找到匹配的项
                if (targetItem) {
                    //如果找到了对应的值，就进行赋值
                    //长度
                    targetLength = targetItem.length;
                    targetType = targetItem.type;
                    // console.log('Found type:', targetType);
                    //如果数据类型是时间
                    if(targetType==='datetime'){
                        inputElement.setAttribute('onfocus', 'WdatePicker()'); // 给输入框增加自定义的触发事件
                    }
                } else {
                    console.log('ID not found');
                }
                // 在点击 <div> 时，将焦点设置到对应的 <input> 元素，执行失去焦点方法
                inputElement.focus();
            }
            // 添加 onblur 事件监听器
            inputElement.onblur = function() {
                //输出长度的值
                // console.log(targetLength)
                //判断当前长度和数据库中获取的长度的值
                if (this.value.length > targetLength) {
                    alert('超出长度限制！'); // 显示提示信息
                    this.value = this.value.slice(0, targetLength); // 截断超出长度的文本
                }
                //数据类型的限制
                //当前文本框中的数据类型
                var inputValue = this.value;
                // console.log("当前："+typeof inputValue+"数据库："+targetType)
                // 根据数据库中的字段类型信息进行数据类型判断
                if (targetType === 'int' && !isNumeric(inputValue) && inputValue != '') {
                    alert('请输入有效的数字！'); // 显示类型不匹配的提示信息
                    this.value = ''; // 清空输入框的值
                    inputElement.removeAttribute('onfocus'); // 移除输入框的触发事件
                }
                else if (targetType === 'varchar' && typeof inputValue !== 'string' && inputValue != '') {
                    alert('请输入有效的字符串！'); // 显示类型不匹配的提示信息
                    this.value = ''; // 清空输入框的值
                    inputElement.removeAttribute('onfocus'); // 移除输入框的触发事件
                }
                else if (targetType === 'datetime') {
                    // inputElement.setAttribute('onfocus', 'WdatePicker()'); // 给输入框增加日期选择器的触发事件
                    //判断输入的值是否是时间格式
                    if (targetType === 'datetime' && !isDateFormat(inputValue) && inputValue != ''){
                        alert('请输入有效的时间！'); // 显示类型不匹配的提示信息
                        this.value = ''; // 清空输入框的值
                    }
                } else {
                    inputElement.removeAttribute('onfocus'); // 移除输入框的触发事件
                }
            };
        });
        // 自定义函数，用于判断一个字符串是否为有效的数字
        function isNumeric(value) {
            return /^-?\d+(\.\d+)?$/.test(value);
        }
        //自定义函数，用于判断是否是时间
        function isDateFormat(value) {
            // 正则表达式匹配 XXXX-XX-XX 格式的日期
            var dateRegex = /^\d{4}-\d{2}-\d{2}$/;
            return dateRegex.test(value);
        }
    }
</script>

注：这里会出现时间选择器不能立刻进行展示，需要二次点击才能出现，解决方法：

将 WdatePicker() 方法放在一个单独的函数中，并在比对完数据库的值后调用该函数。

代码

实现时间插件的方法

function showDatePicker(inputId) {
    var inputElement = document.getElementById(inputId);
    WdatePicker();
    // 其他处理逻辑...
}

在比对完之后，执行showDatePicker(clickedDivId);将对应div的值给该方法。

if (targetItem) {
    //如果找到了对应的值，就进行赋值
    //长度
    targetLength = targetItem.length;
    targetType = targetItem.type;
    // console.log('Found type:', targetType);
    //如果数据类型是时间
    if(targetType==='datetime'){
        showDatePicker(clickedDivId); // 调用 showDatePicker() 函数
        // inputElement.setAttribute('onclick', 'WdatePicker()'); // 给输入框增加自定义的触发事件
    }
}

文章来源地址https://www.toymoban.com/news/detail-533583.html

到了这里，关于PHP：数据库中设置文本长度，通过js去限制前台文本长度。扩展：数据类型的限制的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！