iT邦幫忙

0

提供用戶崁入影片的 input 如何使用 js 正則驗證用戶輸入的數據

  • 分享至 

  • xImage

各位前輩!請教一下:
我有一個輸入框:

<input type="text" id="video" name="video">

我從 facebook 隨意複製一段影片 iframe 代碼:

<iframe src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FJuliusmagic%2Fvideos%2F1348136302204415%2F&show_text=false&width=267" width="267" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>

我在該input 頁面上的 js 代碼如下, 其中 我自己寫的表達式,可以分別驗證開頭與結尾,但無法兼顧 頭部與結尾,指望前輩指點一下兼顧方法:

$("#video").on('blur', function() {
    let video_url = $("#video").val();
            
    var reg = /^<iframe/;            //狀況1 ok 但這只能驗證 開頭部分
    var reg = /iframe>$/;            //狀況2 ok 但這只能驗證 結尾部分
    var reg = /^<iframe*iframe>$/;   //狀況3 格式錯誤 ,顯然中間寫個 * 是不行的,若想開放中間可以某些符號的話,表達式該怎麼寫?
            
    if (video_url !== '') {
        if (!reg.test(video_url)) {
            $("#video").val('');
            $("#info").addClass("warning").show().html("網址格式不正確,請重新複製貼上");
            return;
        }
    }
 }

任何幫助都將銘感於心,希望有前輩可以指教一下,謝謝!

看更多先前的討論...收起先前的討論...
任意字元的話可以使用 .*
/^<iframe.*iframe>$/
非常感謝您!您真是幫了我大忙了,已經可以了,雖說這個過濾方法難免過於簡陋,但也已經可以達成初期效果,謝謝啦!
@小碼農米爾 Mir
如果想在中間部分指定僅接受某些符號的話,又該如何寫?
froce iT邦大師 1 級 ‧ 2021-04-06 15:01:59 檢舉
符號?屬性吧?如src之類的?

如果是的話我會建議用人家寫好的lib做不要用正則做。
https://jsxss.com/zh/index.html
恩好的!再次謝謝您喔!
我發現您的答案寫在討論裡面,我無法將它選取為最佳解答!
@小碼農米爾 Mir 這是純粹想學習
如果想在中間部分指定僅接受某些符號的話,又該如何寫?
ex: 我想限制用戶 在頭尾的中間 只能輸入 [A-Z-z] 以及 [0-9] 以及 [_-]
這樣的需求呢? 能否指點一下
[ ] 可以指定特定字元
將 .* 改成 [A-Za-z0-9_\-]*
就可以限制只能輸入這些字元

.* 是匹配任意字元多次
[A-Z] 是匹配字元 A-Z
[A-Z]* 合在一起的意思是,匹配字元 A-Z 多次
非常謝謝我馬上來試試看
可以耶!非常謝謝您!
@小碼農米爾 Mir
要不要開一個回答,我想加入最佳解答
不用啦,我覺得回答的比較零散
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答