input框的一系列操作(输入框必填*号,验证单选框为必选,默认选中单选按钮,点击禁用表单输入域,输入框变为只读)

最新推荐文章于 2025-02-24 00:15:00 发布

加鸡腿

最新推荐文章于 2025-02-24 00:15:00 发布

阅读量2.3w

点赞数 7

分类专栏： js 文章标签：输入框必填*号 js验证单选框为必选默认选中单选按钮点击禁用表单输入域输入框变为只读

本文链接：https://blog.csdn.net/qq_43437571/article/details/96136764

版权

js 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了使用HTML、JavaScript及jQuery实现表单元素的必填验证、默认选中及禁用等功能的方法。通过实例展示了如何设置输入框为必填项、验证单选框的选择状态、根据后台值默认选中单选按钮、禁用表单输入域以及将输入框设为只读状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例① ：输入框必填，用*号提示

<p class="form-group">
    <label for="author">姓名</label> <span class="required" style="color:red">*</span>
    <br>
    <input type="text" id="author" name="author" required="required" size="15" class="form-text">
</p>

页面效果：
在这里插入图片描述

例②：javascript 验证单选框为必选

<form name="from1">
    <p>请选择你的性别</p>
    <input type="radio" id="male" name="sex" value="1">男
    <input type="radio" id="female" name="sex" value="2">女
    <br />
    <button type="button" onclick="check();">确定</button>
</form>
<script type="text/javascript">
    function check() {
        if (!document.getElementById("male").checked && !document.getElementById("female").checked) {
            alert("必须选择性别！")
            return false;
        }
    }
</script>

页面效果：
在这里插入图片描述

例③：javascript 根据后台的值默认选中单选按钮

<form id="form1">
    <input type="radio" name="sex" value="1" />男
    <input type="radio" name="sex" value="2" />女
</form>
<script>
    var sex = document.getElementsByName('sex');
    for (var i = 0; i < sex.length; i++) {
        if (sex[i].value == '1') {
            sex[i].checked = 'checked';
        }
    }
</script>

页面效果：
在这里插入图片描述

例④：点击禁用表单输入域

首先在head里引入angular.js

<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

body里的代码：

点击这里禁用所有表单输入域:
<input type="checkbox" ng-model="a">
<br><br>
<input type="text" ng-disabled="a">
<input type="radio" ng-disabled="a">
<select ng-disabled="a">
    <option> Female</option>
    <option>Male</option>
</select>

<script>
    var aa = document.querySelector('input');
    console.log();
</script>

页面效果：
在这里插入图片描述

例⑤：输入框变为只读

首先在head里引入jquery.js

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

body里的代码：

<div id="aaa" style="height: 20px;">
    <input type="text">
    <input type="text">
    <input type="text">
</div>
<script>
    $('#aaa input').attr('disabled',true); // 直接变暗，只读的视觉效果很好.
    // $('#aaa input').attr('readonly',true); // 无法输入任何内容，但是只读的视觉效果不明显       
</script>